dentro - Jquery para abrir Bootstrap v3 modal de url remoto

modal bootstrap 4

Question

Tengo una página de enlaces a páginas internas que necesito abrir en un DIV modal de Bootstrap. El problema es que parece que el uso de la última versión de Bootstrap v3 junto con jQuery v2.1.4 simplemente no funciona cuando se trata de cargar contenido de esta manera. He leído muchos tutoriales sobre la creación de modales con Bootstrap y cómo se está eliminando el contenido remoto. Pero tiene que estar lejos para que esto funcione con jQuery, o tal vez no.

La teoría es que al hacer clic

<a class="" href="/log/viewslim?id=72" title="View" data-target="#myModal" data-toggle="modal">View 72</a>

el contenido de data-load-remote se debe leer e inyectar en el div con la clase modal-body .

<div id="myModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Event</h4>
            </div>
            <div class="modal-body">
                <p>Loading...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
    </div>
</div>

Sin embargo, cuando intento este ejemplo con jQuery v2.1.4 y BS v3.3 +, lo que hace es abrir una ventana modal con fondo gris, pero todo el estilo de la ventana modal ha desaparecido. Lo que significa que parece que solo muestra la división de cuerpo modal, pero el encabezado modal, el marco bastante modal y los botones de la parte inferior de la división de pie de página modal no se muestran en absoluto. La única forma de cerrar el cuadro es hacer clic fuera del cuadro modal.

He encontrado ejemplos por todas partes sobre cómo abrir direcciones URL remotas de esta manera, pero todas usan una versión obsoleta de bootstrap, no la versión con la que estoy trabajando. ¿Alguien puede arrojar algunas luces sobre esto por favor?

Answer 1

Básicamente, en jquery lo que podemos hacer es cargar el atributo href usando la función load . De esta manera podemos usar la url en la etiqueta <a> y cargarla en modal-body.

<a  href=''/site/login'' class=''ls-modal''>Login</a>

//JS script
$(''.ls-modal'').on(''click'', function(e){
  e.preventDefault();
  $(''#myModal'').modal(''show'').find(''.modal-body'').load($(this).attr(''href''));
});

Answer 2

De los documentos de Bootstrap sobre la opción remote ;

Esta opción está en desuso desde v3.3.0 y se ha eliminado en v4. En su lugar, recomendamos utilizar plantillas del lado del cliente o un marco de enlace de datos, o llamar a jQuery.load usted mismo.

Si se proporciona una URL remota, el contenido se cargará una vez a través del método de load de jQuery y se inyectará en el div .modal-content . Si está utilizando la api de datos, también puede usar el atributo href para especificar la fuente remota. Un ejemplo de esto se muestra a continuación:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Esa es la div. .modal-content , no .modal-body . Si desea colocar contenido dentro de .modal-body , debe hacerlo con un javascript personalizado.

Así que llamaría a jQuery.load programación, lo que significa que puede mantener la funcionalidad de los botones de descartar y / o de otro tipo según sea necesario.

Para hacer esto, puede usar una etiqueta de datos con la URL del botón que abre el modal y usar el evento show.bs.modal para cargar contenido en la .modal-body .

Enlace HTML / Botón

<a href="#" data-toggle="modal" data-load-url="remote.html" data-target="#myModal">Click me</a>

jQuery

$(''#myModal'').on(''show.bs.modal'', function (e) {
    var loadurl = $(e.relatedTarget).data(''load-url'');
    $(this).find(''.modal-body'').load(loadurl);
});

Answer 3

Si usa @worldofjr answer en jQuery, está obteniendo un error:

e.relatedTarget.data no es una función

Deberías usar:

$(''#myModal'').on(''show.bs.modal'', function (e) {
    var loadurl = $(e.relatedTarget).data(''load-url'');
    $(this).find(''.modal-body'').load(loadurl);
});

No es que e.relatedTarget esté envuelto por $(..)

Recibí el error en la última versión de Bootstrap 3 y, después de usar este método, está funcionando sin ningún problema.

Answer 4

Una perspectiva diferente al mismo problema lejos de Javascript y usar php:

<a data-toggle="modal" href="#myModal">LINK</a>

<div class="modal fade" tabindex="-1" aria-labelledby="gridSystemModalLabel" id="myModal" role="dialog" style="max-width: 90%;">
    <div class="modal-dialog" style="text-align: left;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                <?php include( ''remotefile.php''); ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

y ponga en el archivo remote.php su fuente html básica.

Answer 5

e.relatedTarget.data(''load-url''); no funcionará
usar dataset.loadUrl

$(''#myModal'').on(''show.bs.modal'', function (e) {
    var loadurl = e.relatedTarget.dataset.loadUrl;
    $(this).find(''.modal-body'').load(loadurl);
});