Les URL externes modales de bootstrap de Twitter ne fonctionnent pas

Twitter bootstrap modal ne se charge pas des url externes à l'intérieur modal.

Exemple De Code : 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>

source d'informationauteur Naveen | 2012-08-28

  1. 31

    Cela ne fonctionne pas parce que vous êtes en violation de la même origine de la politique de restriction qui vous empêche d'envoyer des croix domaine des requêtes AJAX qui est ce que bootstrap est l'aide ici. Donc, une possibilité est de charger le contenu externe dans 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>');
});​

    Soyez averti, cependant, que certains sites (tels que google, stackoverflow, facebook, ...) ne peut pas être chargé dans une iframe. Ils sont le réglage de la X-Frame-Options réponse HTTP en-tête de SAMEORIGIN et également vérifier si elles sont chargées à l'intérieur d'un iframe.

    Vous pouvez le voir en action dans ce violon: http://jsfiddle.net/f2Fcd/

  2. 2

    Essayez ceci:

    <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>
  3. 0

    Cet extrait aide à l'extraction modale de contenu via Ajax:

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

    Garder à l'esprit que le HTML response cheveux, doivent contenant les dom-éléments normalement présents à l'intérieur de la "modal-content" élément:

     <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>