twitter bootstrap - problem - Las URL externas modales de arranque de Twitter no funcionan

select2 search field modal

Question

El método de arranque de Twitter no carga las URL externas dentro de modal.

Código de muestra: jsFiddle

<a data-toggle="modal" class="btn" href="http://stackoverflow.com" data-target="#myModal">click me</a>
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
</div>
</div>

Answer 1

Esto no funciona porque está infringiendo la misma restricción de política de origen que le impide enviar solicitudes AJAX de dominio cruzado, que es lo que está usando el arranque. Entonces, una posibilidad es cargar el contenido externo en un <iframe> :

$(''a.btn'').on(''click'', function(e) {
e.preventDefault();
var url = $(this).attr(''href'');
$(''.modal-body'').html(''<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'' + url + ''"></iframe>'');
});​

Sin embargo, ten en cuenta que algunos sitios (como google, stackoverflow, facebook, ...) no se pueden cargar en un iframe. Están configurando el encabezado HTTP de respuesta X-Frame-Options en SAMEORIGIN y también verifican si están cargados dentro de un iframe .

Puedes verlo en acción en este violín: http://jsfiddle.net/f2Fcd/

Answer 2

Prueba esto:

<script type="text/javascript" charset="utf-8">
$(function() {
$(''*[data-modal]'').click(function(e) {
e.preventDefault();
var href = $(e.target).attr(''href'');
if (href.indexOf(''#'') == 0) {
$(href).modal(''show'');
} else {
$.get(href, function(data) {
$(''<div class="modal">'' + data + ''</div>'').modal(''show'').appendTo(''body'');
});
}
});
});
</script>

Answer 3

Este fragmento ayuda a recuperar el contenido modal a través de Ajax:

$.get(href, function(response) {
$("#myModal .modal-content").html(response);
});

Tenga en cuenta que la response HTML obtenida debe contener los elementos dom normalmente presentes dentro del elemento "contenido modal":

 <div class="modal-header">HEADER</div>
<div class="modal-body">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">Do It</button>
</div>