Twitter引導模態外部網址不起作用

Twitter引導模式不會在模態內加載外部網址。Twitter引導模態外部網址不起作用

示例代碼：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>

來源

2012-08-28 Naveen

這不工作，因爲你違反了防止您發送跨域AJAX請求這就是引導在這裏使用相同的origin policy restriction。所以，一種可能性是外部內容加載到：

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

被警告，雖然一些網站（如谷歌，計算器，臉譜，...）不能被加載到iframe。他們正在將X-Frame-Options響應HTTP標頭設置爲SAMEORIGIN，並檢查它們是否在iframe中加載。

你可以看到它的行動在這個小提琴：http://jsfiddle.net/f2Fcd/

來源

2012-08-28 06:19:10

謝謝你的回覆。我使用外部URL來檢查這個問題是js小提琴。我想加載我的內部asp.net mvc視圖來加載模型。這對我不起作用。舉例來說，我使用helloworld.html http://jsfiddle.net/kV8hB/3/ 謝謝，Naveen – Naveen

如果你想加載你的內部ASP.NET MVC視圖，那麼你不需要一個iframe 。只要確保網址是正確的。例如，如果將直接位於'href'中的url直接放入瀏覽器地址欄，會發生什麼？它工作嗎？ –

謝謝你的幫助。 – Naveen

試試這個：

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

來源

2012-08-30 12:20:02 DamienB4T

這段代碼有助於獲取通過Ajax的模態內容：

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

記住，提取的HTML response必須包含通常存在於「模態內容」元素內的dom元素：

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

來源

2014-04-04 11:13:17

Twitter引導模態外部網址不起作用

回答

相關問題