使用 Bootstrap、模态（弹出）和 iframe

Posted 2023-05-09

【中文标题】使用 Bootstrap、模态（弹出）和 iframe

【英文标题】：Using getBoostrap , modal (popup) and an iframe

【发布时间】：2015-02-03 23:00:45

【问题描述】：

我有一个包含 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="mymodal" 的项目。

谢谢

【参考方案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>

【讨论】：

谢谢，它有效。我很困惑，因为我认为按钮的属性“数据切换”和“数据目标”必须消失。我是使用引导程序的新手。