Bootstrap 3 - Como carregar conteúdo no corpo modal via AJAX?

Como você pode ver aqui, eu tenho um botão que lança um modal. Configurando um href url para o botão este url é automaticamente carregado no modal pelo Bootstrap 3. O fato é que esta página é carregada na raiz modal (como dito na documentação bootstrap 3 para uso modal). Eu quero carregá-la no modal-corpo em vez disso.

Existe uma forma de o fazer através de atributos (não javascript)? Ou qual é a forma mais automática de o fazer?

P.S. Lembro-me que no Bootstrap 2 o conteúdo estava carregado no corpo, não na raiz.

Zim
Pergunta editada :em
Programação
modal-dialog ajax twitter-bootstrap-3 twitter-bootstrap
29º outubro 2013 в 4:08
15 vistas

Isto é realmente super simples com apenas um pouco de javascript adicional. O link's href é usado como a fonte de conteúdo ajax. Note que para o Bootstrap 3.* nós definimos data-remote="false" para desabilitar a função deprecated Bootstrap load function.

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 (baseado em o exemplo 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>

Experimente você mesmo: https://jsfiddle.net/ednon5d1/

marcovtwout
Resposta editada :em
Comentários (7)
Solução

Verifique esta resposta de SO out.

Parece que a única maneira é fornecer toda a estrutura modal com a sua resposta ajax.

Como você pode verificar no bootstrap código fonte, a função de carga está ligada ao elemento raiz.

Caso você possa't modificar a resposta ajax, uma simples volta de trabalho poderia ser uma chamada explícita do $(...).modal(...) plugin no seu elemento de corpo, mesmo que provavelmente irá quebrar as funções show/hide do elemento raiz.

Community
Resposta editada :em
Comentários (0)

Eu acho que você'está procurando por esta função personalizada. Ela pega um atributo data-toggle e cria dinamicamente o mergulho necessário para colocar o conteúdo remoto. Basta colocar o data-toggle="ajaxModal" em qualquer link que você queira carregar via AJAX.

A parte do 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);
              }
            );

Finalmente, no conteúdo remoto, você precisa colocar toda a estrutura para funcionar.

<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
Resposta editada :em
Comentários (1)