Bootstrap模式不呈現iframe

無法完全弄清楚是什麼導致這裏出現故障。但是我直接從Bootstrap網站上的模式示例中拉取。試圖嵌入Spotify iFrame失敗。任何關於如何獲取內容呈現的指針？ aka期望的結果將是播放spotify播放列表的能力。Bootstrap模式不呈現iframe

<!-- Modal --> 
    <div id="myModal" class="modal hide fade" 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"> 
     <iframe src="https://embed.spotify.com/?uri=spotify:user:1270558680:playlist:6nfXkdY7eZwINySrDHIFiV" width="300" height="380" frameborder="0" allowtransparency="true"></iframe> </div> 
     <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary">Save changes</button>

來源

2013-12-23 user3130618

它看起來像你缺少「模式，對話」的div中，「模態內容」 DIV，和一些封閉的div。

我直接複製的模式例如，從引導網站，插入你的iframe和它的工作（Here's a fiddle）。下面是從引導網站上的例子模式：當您加載，這就是爲什麼當你點擊負載模式不顯示的iFrame的很大一部分的頁面

<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<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-hidden="true">&times;</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><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

來源

2013-12-23 21:21:17 ringstaff

但爲什麼當我把谷歌或https://www.facebook.com/在它不工作？ –

IFrame，這是不是在正確的位置顯示。

你有沒有嘗試過：http://www.bootply.com/61676

來源

2014-02-25 17:07:18 doizuc

-1

您可以使用eModal,js！ （5KB只）

的簡單方法：

eModal.iframe("https://embed.spotify.com/?uri=spotify:track:0YtFqZhheQZIrVc0qbqL8D")

一些化妝：

eModal.iframe({ 
    url: "https://embed.spotify.com/?uri=spotify:track:0YtFqZhheQZIrVc0qbqL8D", 
    size:eModal.size.sm, 
    title:"Da weasel"});

此lib中也支持AJAX，警報，promp或確認。

沒有HTML需要！

來源

2015-06-30 00:15:29

不回答問題.. – Gogol

Bootstrap模式不呈現iframe

回答

相關問題