javascript - 在 iFrame 的父窗口中打开一个 div

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 的 parent 属性来访问父文档。你可以看看这个JSFiddle明白我的意思。不幸的是，它的设置有点奇怪，因为 iframe 无法访问 JSFiddles javascript 窗口(或者我只是不知道如何访问)，但是您在 iframe 中看到的内容嵌入在其属性 srcdoc 中.让我知道是否需要任何解释。