在引導模式中打開iframe點擊

Question

我正在嘗試創建一個按鈕，打開一個包含iframe的模式。 iframe只能在模式打開時加載。現在當我點擊我的按鈕打開模式時，沒有任何東西被加載，並且在控制檯中沒有給出錯誤。

我正在關注我發現的一箇舊片段here，但似乎使用較新版本的bootstrap，它似乎不起作用。

jQuery的

var frameSrc = "http://test.com"; 

$('#ticketViewBtn').click(function(){ 
    $('#ticketView').on('show', function() { 

     $('iframe').attr("src",frameSrc); 

    }); 
    $('#ticketView').modal({show:true}) 
}); 

引導

     <!-- Button trigger modal --> 
         <button class="btn btn-primary btn-sm" id="#ticketViewBtn" data-toggle="modal" data-target="#ticketView"> 
          TICKET 
         </button> 
         <!-- Modal --> 
         <div class="modal fade" id="ticketView" tabindex="-1" role="dialog" aria-labelledby="ticketViewLabel" 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="ticketViewLabel">TICKET</h4> 
            </div> 
            <div class="modal-body"> 
             <iframe src="" height="600px" width="800px" frameborder="0"></iframe> 
            </div> 
            <div class="modal-footer"> 
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
            </div> 
           </div> 
           <!-- /.modal-content --> 
          </div> 
          <!-- /.modal-dialog --> 
         </div> 
         <!-- /.modal --> 

Answer 1

使用此代碼加載的iframe。

$('#ticketViewBtn').click(function(){  
    var iframe_id = $("#myiframe"); 
    iframe.attr("src", iframe.data("src")); 
    $('#ticketView').modal({show:true}) 
}); 

<iframe id="myiframe" src="" height="600px" data-src="http://test.com" src="about:blank" width="800px" frameborder="0" onload="resizeIframe(this)" ></iframe> 

function resizeIframe(iframe) { 
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";   
} 

Answer 2

確定..這是簡單的模式..
沒有jQuery和不含自舉
只是骨架..
模態格每一個環節都將'目標'到iframe_modal

.modal { 
 
    z-index:3; 
 
    display:none; 
 
    padding-top:50px; 
 
    position:fixed; 
 
    left:0; 
 
    top:0; 
 
    width:100%; 
 
    height:100%; 
 
    overflow:auto; 
 
    background-color:rgb(0,0,0); 
 
    background-color:rgba(0,0,0,0.4) 
 
}

<a href="https://www.example.com" onclick="document.getElementById('modal1').style.display='block'" target="iframe_modal" >example</a> 
 
<a href="https://www.bing.com" onclick="document.getElementById('modal1').style.display='block'" target="iframe_modal">bing</a> 
 

 
<div id="modal1" class="modal"> 
 
    <span onclick="document.getElementById('modal1').style.display='none'; document.getElementById('iframe1').src =''" class="">&times;</span> 
 
    <iframe id="iframe1" height="300px" width="100%" src="" name="iframe_modal"></iframe> 
 
</div>

使用jquery：

<a href="https://www.example.com">example</a> 
<a href="https://bing.com/"  >bing</a> 

<div id="modal1" class="modal"> 
    <span>&times;</span> 
    <iframe id="iframe1" height="300px" width="100%" src="" ></iframe> 
</div> 

$(document).ready(function(){ 
    $("a").click(function(){ 
        $("#modal1").show(); 

當點擊一個 'A'，當前（本）屬性附加傷害HREF '一' 將是獲取和設置 爲SRC '＃iframe1'

 $("#iframe1").attr("src", $(this).attr("href")); 
     return false; 
    }); 
    $("span").click(function(){ 
        $("#modal1").hide(); 
     $("#iframe1").attr("src", ""); 
    });  
});