3

Tengo un modal popup que se cierra al seleccionar un elemento de una tabla.

Captura de pantalla: introducir la descripción de la imagen aquí

El popup se cierra, pero al hacerlo deja bloqueada mi plantilla html.

¿por qué sucede esto?

Este es el código que uso para cerrar el popup:

    $(document).ready(iniciar);

function iniciar() {
    $("#busqueda_parroquia tr td").click(clickTabla);
}

$(document).ready(function () {
    var table = $('#busqueda_parroquia').DataTable();
    var dato = "";
    //para seleccionar una opcion
    $('#example tbody').on('click', 'tr', function () {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
            dato = "";
            console.log(dato);
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
            dato = $(this).find("td:eq(0)").text();
            console.log(dato);
        }
    });
});

$("#BusquedaParroquia").on('click', 'tr', function (e) {
    e.preventDefault();
    var renglon = $(this);
    var campo1, campo2, campo3;
    $(this).children("td").each(function (i) {
        switch (i) {
            case 0:
                campo1 = $(this).text();
                break;
            case 1:
                campo2 = $(this).text();
                break;
            case 2:
                campo3 = $(this).text();
                break;
        }
    })
    $("#txt_codigo").val(campo1);
    $("#txt_nombre").val(campo2);
    if (campo3 == "A") {
        $("#che_estado").prop("checked", "checked");
    }
    CierraPopup();
});

function CierraPopup() {
    $("#popupBusquedaParroquia").modal('hide');//ocultamos el modal
    $('body').removeClass('modal-open');//eliminamos la clase del body para poder hacer scroll
    $('.modal-backdrop').remove();//eliminamos el backdrop del modal
}

Modal

 <!-- Modal Escenario-->
<div class="modal fade" id="popupBusquedaParroquia" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
                <h4 class="modal-title" id="myModalLabel">Busqueda de Parroquias</h4>
            </div>
            <div id="BusquedaParroquia" class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="stock_bodega">Busqueda por:</label>
                        <select class="form-control" style="width: 40%" id="stock_bodega">
                            <option>Nombre</option>
                        </select>
                        <label for="texto_buscar">Texto a Buscar:</label>
                        <input type="text" class="form-control" id="texto_buscar">
                    </div>
                    <div style="position: relative; overflow: auto; width: 100%; height: 200px;" class="dataTables_scrollBody">
                        <table style="width: 100%;" id="busqueda_parroquia" class="display nowrap dataTable no-footer" cellspacing="0" width="100">
                            <thead>
                                <tr>
                                    <th>Codigo</th>
                                    <th>Nombre</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                  <td>001</td>
                                  <td>La Troncal</td>
                                  <td>A</td>
                                </tr>
                                <tr>
                                  <td>002</td>
                                  <td>San Joose</td>
                                  <td>A</td>
                                </tr>
                             </tbody>
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Seleccionar</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>  <!-- Modal Escenario-->
8
  • Relacionado es.stackoverflow.com/q/11201/6635
    – JuankGlezz
    el 16 mar. 2017 a las 15:07
  • que es lo que hace exactamente esta parte? $(document).ready(iniciar);function iniciar() { $("#busqueda_parroquia tr td").click(clickTabla);}
    – JuankGlezz
    el 16 mar. 2017 a las 18:26
  • que la función esta iniciada para que pueda detectar el click que hace el usuario sobre la tabla. el 16 mar. 2017 a las 19:12
  • esa funcion es la del problema el 16 mar. 2017 a las 19:12
  • solo es una función de mas, no es necesaria ya que tienes esta $("#BusquedaParroquia").on('click', 'tr', function (e) { que es la que detecta el clic, no necesitas inicializar alguna función ya que estas se inician en cuanto sucede el evento del clic
    – JuankGlezz
    el 16 mar. 2017 a las 19:18

7 respuestas 7

5

La manera que estás escondiendo el modal no es correcta. Lo que haces es esconder el html del div que contiene el modal y después eliminar el html del .modal-backdrop. Se deberían usar las funciones javascript que boostrap ofrece.

Según la documentación oficial de bootstrap, los métodos para mostrar y esconder modals son:

Mostrar modal:

$('#myModal').modal('show')

Esconder modal:

$('#myModal').modal('hide')

Para esconder el modal, si previamente has hecho un show solo deberías tener que llamar al hide.

4
  • 2
    si lo esconde de esta manera pero porque la plantilla queda bloqueada ese es mi problema igual realice el cambio de esconder el popup de la manera que tu dices. el 16 mar. 2017 a las 14:36
  • Sin más datos es complicado saber que puede ser lo que pasa. Hay algún error de consola, alguna id repetida...?
    – Joan Gil
    el 16 mar. 2017 a las 14:44
  • añadi una imagen a la pregunta tal vez sirva de ayuda. el 16 mar. 2017 a las 15:02
  • Entiendo que si utiliza bootstrap, la clase 'modal-backdrop' es propia de bootstrap y ahora con la imagen que ha añadido, se ve la estructura de un modal de bootrstap. Aun así, creo que la respuesta de @JuankGlezz puede ser útil.
    – Joan Gil
    el 16 mar. 2017 a las 15:20
4

Respuesta obtenida de esta pregunta https://es.stackoverflow.com/a/11202/6635

Una solución como lo sugiere la respuesta antes mencionada quitar la clase fade del modal o bien hacer lo que haces tu, una eliminación manual de clases

Ahora si nos acoplamos a tu código esto seria una solución.

Si aun aplicando tu función CerrarPopup() deja bloqueada tu plantilla es porque aun hace falta eliminar la clase modal-open del body

$('body').removeClass('modal-open');

Por lo tanto tu función quedaría de esta forma:

function CierraPopup() {
  $("#popupBusquedaParroquia").modal('hide');//ocultamos el modal
  $('body').removeClass('modal-open');//eliminamos la clase del body para poder hacer scroll
  $('.modal-backdrop').remove();//eliminamos el backdrop del modal
}

Edit:

Estas iniciando un clic cuando no es necesario, ya que esto se vuelve código de más y puede generar errores o mal funcionamiento. Por lo tanto es mejor quitarlo

$(document).ready(iniciar);

function iniciar() {
    $("#busqueda_parroquia tr td").click(clickTabla);
}
3
  • al parecer el error es otro no me funciona puedo añadir el código donde hago la selección de un elemento de la tabla y la cargo en el textbox, tal vez ese código sea el del problema el 16 mar. 2017 a las 15:43
  • @RicardoEspaña añade todo el código necesario para poder reproducir el problema, editando tu pregunta
    – JuankGlezz
    el 16 mar. 2017 a las 16:20
  • ya añadí las funciones el 16 mar. 2017 a las 16:42
3

Estimado para que no tenga que quitar clases deje que la misma modal se encargue de eso. Le recominedo coloque este código en su aplicación. Para la parte del Javascript.

$(document).ready(iniciar);

function iniciar() {
$("#busqueda_parroquia tr td").click(clickTabla);
}

$(document).ready(function () {
var table = $('#busqueda_parroquia').DataTable();
var dato = "";
//para seleccionar una opcion
$('#example tbody').on('click', 'tr', function () {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
        dato = "";
        console.log(dato);
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
        dato = $(this).find("td:eq(0)").text();
        console.log(dato);
    }
});
});

$("#BusquedaParroquia").on('click', 'tr', function (e) {
e.preventDefault();
var renglon = $(this);
var campo1, campo2, campo3;
$(this).children("td").each(function (i) {
    switch (i) {
        case 0:
            campo1 = $(this).text();
            break;
        case 1:
            campo2 = $(this).text();
            break;
        case 2:
            campo3 = $(this).text();
            break;
    }
})
$("#txt_codigo").val(campo1);
$("#txt_nombre").val(campo2);
if (campo3 == "A") {
    $("#che_estado").prop("checked", "checked");
}
CierraPopup();
});

function CierraPopup() {
$('#cerrar').click(); //Esto simula un click sobre el botón close de la modal, por lo que no se debe preocupar por qué clases agregar o qué clases sacar.
$('.modal-backdrop').remove();//eliminamos el backdrop del modal
}

Para la parte de su modal lo único que tiene que hacer es darle un id al botón de cerrar. Una cosa así:

<!-- Modal Escenario-->
<div class="modal fade" id="popupBusquedaParroquia" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
            <h4 class="modal-title" id="myModalLabel">Busqueda de Parroquias</h4>
        </div>
        <div id="BusquedaParroquia" class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="stock_bodega">Busqueda por:</label>
                    <select class="form-control" style="width: 40%" id="stock_bodega">
                        <option>Nombre</option>
                    </select>
                    <label for="texto_buscar">Texto a Buscar:</label>
                    <input type="text" class="form-control" id="texto_buscar">
                </div>
                <div style="position: relative; overflow: auto; width: 100%; height: 200px;" class="dataTables_scrollBody">
                    <table style="width: 100%;" id="busqueda_parroquia" class="display nowrap dataTable no-footer" cellspacing="0" width="100">
                        <thead>
                            <tr>
                                <th>Codigo</th>
                                <th>Nombre</th>
                                <th>Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                              <td>001</td>
                              <td>La Troncal</td>
                              <td>A</td>
                            </tr>
                            <tr>
                              <td>002</td>
                              <td>San Joose</td>
                              <td>A</td>
                            </tr>
                         </tbody>
                    </table>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">Seleccionar</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" id="cerrar">Cerrar</button>
        </div>
    </div>
</div>
</div>  <!-- Modal Escenario-->

Espero haberle ayudado en su proyecto. Saludos!

3
$("mymodal").modal("toggle");

esto es como un switch si el modal esta en show actua el hide y viceversa

0
2

Puedes simplemente eliminarlo, por ejemplo así:

$('.fade').remove();

$('body').removeClass('modal-open');

-1

A mi me funciono invocando $('#myModal').modal('show') mediante un onclick() desde mi boton nuevo y cerre invocando una funcion ocultar_modal() {$('#myModal').modal('hide')}

-2

Me funciono con $('.modal').removeClass('shw'); $('modal-backdrop').remove();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.