Bootstrap 4点击后加载弹出iframe答案

【问题标题】：Bootstrap 4 load popup iframe after clickBootstrap 4点击后加载弹出iframe
【发布时间】：2017-05-07 09:16:39
【问题描述】：

目前我的网站上有 100 个 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 个体的内容。

我用谷歌搜索了 40 多页，但找不到解决方案，希望有人能在这个话题上帮助我

【问题讨论】：

标签： javascript twitter-bootstrap modal-dialog

【解决方案1】：

最后我已经建立了一个解决方案：

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/

【讨论】：