Question

我有一个包含iframe的主页面，在这个iframe中，我有一个单击按钮来运行弹出框，但只在iframe内部运行，我希望在主页上是全局的。

这是使用getboostrap的模态代码我在主页上有这段代码：

<div class="modal fade"  id="myModal">
    <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div><!-- /.modal-content -->

这是iframe上按钮的代码：

<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
</button>

问题在于我无法使用id =＆＃34; mymodal＆＃34;来访问主页中的项目。

由于

Answer 1

您必须在首页中创建一个javascript函数，当您点击该按钮上的iframe时，您必须访问使用parent.myfunction('myModal');或您当前ID的主页功能。

所以在你的主页上你会有这样的东西：

function myfunction(id){
    //open the modal with the id = your entry id
}

在iframe中你不再拥有这个：

<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
</button>

你会得到：

<button type="button" class="btn btn-default btn-lg" onclick="parent.myfunction('myModal')">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
</button>

使用Bootstrap，modal（弹出窗口）和iframe

1 个答案: