Question

我有一个页面，其中有一个iFrame到另一个页面，我正在寻找的是在iframe中单击带有此代码的按钮：

<td class="id-center">                 
    <div class="bs-example">
        <a id="comments" href="comments.php?id=$id"  name="comments" value="$id" data-toggle="modal" data-target=".bs-example-modal-lg\" class="btn btn-primary btn-default center-1"><span class="glyphicon glyphicon-comment"></span></a>
    </div> 
</td>

然后可以在父窗口中打开以下叠加弹出框：

<!-- Large modal -->

<div style="width:90%;" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myLargeModalLabel">Add a comment</h4>
        </div>
        <!-- Body of popup -->
        <div class="modal-body">
            Test
        </div>
    </div>
  </div>
</div>

我正在使用Bootstrap 3这样做。任何帮助将不胜感激！

Answer 1

你可以采用的一种方法是通过bootstrap的javascript api打开模态。使这项工作的关键是使用iframe的htaccess属性来访问父文档。您可以查看此JSFiddle以了解我的意思。不幸的是，它设置有点奇怪，因为iframe无法访问JSFiddles javascript窗口（或者我只是不知道如何），但您在iframe中看到的内容嵌入在其属性htacces中。如果有任何需要任何解释，请告诉我。

Answer 2

window.document.body.insertAdjacentHTML('afterbegin', "<div id='overlay' style='height: 100em;background-color:#000; opacity:0.4; width: 100%;z-index: 1000;position: fixed;'><div style='height: 100%;width: 70px;margin: auto;'><img src='/spinner.gif' style='height: 70px;margin-top: 40vh;'/></div></div>")

这会将叠加层添加到您的父体，但只有当两个页面位于同一个域中时才会起作用。

在iFrame的父窗口中打开div

2 个答案: