ट्विटर बूटस्ट्रैप मोडल बाहरी यूआरएल काम नहीं कर रहे हैं

Question

ट्विटर बूटस्ट्रैप मोडल मोडल के अंदर बाहरी यूआरएल लोड नहीं करता है।

नमूना कोड: 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

यह काम नहीं करता है क्योंकि आप एक ही origin policy restriction है कि आप जो यहाँ क्या बूटस्ट्रैप उपयोग कर रहा है क्रॉस डोमेन AJAX अनुरोध भेजने से रोक दिया उल्लंघन कर रहे हैं। तो एक संभावना एक में बाह्य सामग्री लोड करने के लिए है:

$('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>'); 
});​ 

चेतावनी दी हो, यद्यपि कुछ साइटें (जैसे गूगल, stackoverflow, के रूप में फेसबुक, ...) एक iframe में लोड नहीं किया जा सकता है। वे X-Frame-Options प्रतिक्रिया HTTP शीर्षलेख SAMEORIGIN पर सेट कर रहे हैं और यह भी जांचें कि क्या उन्हें iframe के अंदर लोड किया गया है या नहीं।

आप इस बेला में कार्रवाई में इसे देख सकते हैं: http://jsfiddle.net/f2Fcd/

Answer 2

आज़माएं:

<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

यह स्निपेट अजाक्स के माध्यम से मोडल विषय-वस्तु आकर्षित में मदद करता है:

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

ध्यान रखें , कि HTML response प्राप्त हुआ, सामान्य रूप से "मोडल-सामग्री" तत्व के अंदर मौजूद डोम-तत्वों का विरोध करना चाहिए:

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