单击

时间:2017-05-07 09:16:39

标签: javascript twitter-bootstrap modal-dialog

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

&#13;
&#13;
 <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>
&#13;
&#13;
&#13;

我想要做的只是在点击bootstrap模态按钮后加载每个iframe个人的内容。

我用Google搜索超过40页并且无法找到解决方案,希望有人可以帮助我解决这个问题

1 个答案:

答案 0 :(得分: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/