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.
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):
<!-- Link trigger modal -->
<a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">
Launch Modal
</a>
<!-- Default bootstrap modal example -->
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Experimente você mesmo:
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.
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">
<button type="button" class="close" data-dismiss="modal">×</button>
<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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->