javascript - 在 iframe 外打开一个弹出窗口，但链接在 iframe 内

Question

在一个 html 页面中，我包含了一个 iFrame。

在 iFrame 中，有一个链接，

<a href="#" class="modal {targetelement:'#newstyle',closetext:'Close details',opentext:'View details'}">open window</a>

如果我在父窗口上添加链接和弹出 html，它工作正常。

但如果我在 iframe 弹出窗口中添加链接，则 html 不会打开。

我的确切要求:打开 iframe 上方的弹出窗口。

我可以将弹出式 html 的位置(在 iframe 或父页面内)移动到任何地方，但不能更改 <a href="#" id="modelboxnew">open window</a> 的位置它应该只在 iframe 中

这是我的弹窗

<div  id="newstyle" > xyax text ..my popup html </div>

Answer 1

您的 iframe 实际上是一个完全不同的页面，因此它可能无法正常工作，因为 iframe 的页面中不存在您的模态 javascript。话虽这么说，即使您将所有 javascript 移动到 iframe 中，从那里启动模态也会使其陷入 iframe 中。

相反，您希望父窗口中包含所有 javascript 和模态 html/css 内容，然后从您的 iframe 链接调用存在于父窗口中的弹出启动函数。因此，在不知道您的确切代码或您使用的框架的情况下，简单来说，基本思想是执行以下操作(假设使用 jquery，因为您将问题标记为这样)...

在您的主窗口中:

<script type="text/javascript" >
    function showPopup() {
        $("#newstyle").dialog();
    }
</script>
...
<div id="newstyle" > xyax text ..my popup html </div>

在你的模式中:

<script type="text/javascript">
    $(function() {
        $("#modelboxnew").click(function() {
            parent.showPopup();
        });
    });
</script>
...
<a href="#" id="modelboxnew" >open window</a>

请注意，您需要控制主页和 iframe，并且它们需要从同一域托管，以免被浏览器的安全性阻止。