在引导模式中打开iframe点击

我正在尝试创建一个按钮，打开一个包含iframe的模式。 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 -->

来源

2017-07-27 John Lang

使用此代码加载的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";   
}

来源

2017-07-27 14:17:59

确定..这是简单的模式..
没有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", ""); 
    });  
});

来源

2017-07-27 15:16:50 antelove

在引导模式中打开iframe点击

回答

相关问题