2017-05-07 83 views
1

目前我的網站上有100個iframe,它在訪問索引頁後直接加載。Bootstrap 4點擊後加載彈出iframe

請波紋找到我的代碼:

cell.innerHTML+= "<a title='Attachemnts' data-toggle='modal' data-target='#"+id+"' class='btn btn-xs btn-default'><span class='fa fa-paperclip'></span></a>&nbsp;" 
cell.innerHTML+= "<div id='"+id+"' class='modal fade' role='dialog'><div class='modal-dialog'><!-- Modal content--><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal'>&times;</button><h4 class='modal-title'><iframe src='attachments.php"+id+"'></iframe></h4></div><div class='modal-body'><p>test</p></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button></div></div></div></div>"; 

更好的視覺粘貼唯一的相同代碼的HTML內容

<a title='Attachemnts' data-toggle='modal' data-target='#"+id+"' class='btn btn-xs btn-default'><span class='fa fa-paperclip'> 
 
    
 
    <div id='"+id+"' class='modal fade' role='dialog'> 
 
    <div class='modal-dialog'> 
 
    <div class='modal-content'> 
 
    <div class='modal-header'> 
 
    <button type='button' class='close' data-dismiss='modal'>&times;</button> 
 
    <h4 class='modal-title'><iframe src='attachments.php"+id+"'></iframe></h4></div> 
 
    <div class='modal-body'><p>test</p></div><div class='modal-footer'> 
 
    <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button></div></div></div></div>

我想要做的是每一個加載內容iframe個人只需點擊引導模式按鈕後。

我GOOGLE了40多頁,沒有能夠找到解決辦法希望有人能幫助我在這個題目

回答

0

Finnaly我有建立一個解決方案:

的Javascript

$('a.video').click(function() { 
    var id = $(this).attr('attachmentid'); 
    var src = 'attachment.php?ref='+id; 
    $("#attachment").attr('src', src); 
    $('#test').modal('show'); 
    return false; 
}); 

HTML

<a attachmentid='GS0089' class='video btn btn-xs btn-default'>Popup</a> 
<div id='test' class='modal fade' role='dialog'> 
<div class='modal-dialog'> 
<div class='modal-content'><div class='modal-header'> 
<button type='button' class='close' data-dismiss='modal'>&times;</button> 
<h4 class='modal-title'>Modal Header "+id+"</h4></div> 
<div class='modal-body'><div class='video-wrapper'> 
    <iframe id='attachment' width='560' height='315' frameborder='0' allowfullscreen></iframe> 
</div></div> 
<div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button></div></div></div></div> 

https://jsfiddle.net/George_Skyway/j4we7zhh/4/