Bootstrap 3 - ¿Cómo cargar el contenido en el cuerpo del modal mediante AJAX?

Como puedes ver aquí, tengo un botón que lanza un modal. Estableciendo una url href para el botón esta url se carga automáticamente en el modal por Bootstrap 3. El hecho es que esta página se carga en la raíz del modal (como se dice en la documentación de Bootstrap 3 para el uso de modales). Quiero cargarla en el modal-body en su lugar.

¿Hay alguna manera de hacerlo a través de atributos (no javascript)? ¿O cuál es la forma más automática de hacerlo?

P.D. Recuerdo que en Bootstrap 2 el contenido se cargaba en el cuerpo, no en la raíz.

Zim
Pregunta editada 26º abril 2018 в 11:28
Programación
modal-dialog ajax twitter-bootstrap-3 twitter-bootstrap
29º octubre 2013 в 4:08
13 vistas

Esto es realmente super simple con sólo un poco de javascript añadido. El enlace's href se utiliza como la fuente de contenido ajax. Tenga en cuenta que para Bootstrap 3.* establecemos `data-remote="false"para desactivar la función de carga de Bootstrap obsoleta.

JavaScript:

// Fill modal with content from link href
$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

Html (basado en el ejemplo oficial):


<a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">
    Launch Modal
</a>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <span aria-hidden="true">×</span>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        Close
        Save changes
      </div>
    </div>
  </div>
</div>

Pruebe usted mismo: https://jsfiddle.net/ednon5d1/

marcovtwout
Respuesta editada 6º agosto 2015 в 2:13
Comentarios (7)
Solución

Comprueba esta respuesta SO.

Parece que la única manera es proporcionar toda la estructura modal con su respuesta ajax.

Como puedes comprobar en el [código fuente] de bootstrap (https://github.com/twbs/bootstrap/blob/master/js/modal.js#L27), la función de carga está vinculada al elemento raíz.

En caso de que no puedas modificar la respuesta ajax, una solución sencilla podría ser una llamada explícita al plugin $(..).modal(..) en tu elemento body, aunque probablemente romperá las funciones show/hide del elemento raíz.

Community
Respuesta editada 23º mayo 2017 в 11:54
Comentarios (0)

Supongo que estás buscando esta función personalizada. Toma un atributo data-toggle y crea dinámicamente el div necesario para colocar el contenido remoto. Sólo tienes que colocar el data-toggle="ajaxModal" en cualquier enlace que quieras cargar vía AJAX.

La parte JS:

$('[data-toggle="ajaxModal"]').on('click',
              function(e) {
                $('#ajaxModal').remove();
                e.preventDefault();
                var $this = $(this)
                  , $remote = $this.data('remote') || $this.attr('href')
                  , $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>');
                $('body').append($modal);
                $modal.modal({backdrop: 'static', keyboard: false});
                $modal.load($remote);
              }
            );

Por último, en el contenido remoto, hay que poner en funcionamiento toda la estructura.

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            ×
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-white" data-dismiss="modal">Close</a>
            <a href="#" class="btn btn-primary">Button</a>
            <a href="#" class="btn btn-primary">Another button...</a>
        </div>
    </div>
</div>
Pratik Gadoya
Respuesta editada 20º agosto 2014 в 9:16
Comentarios (1)