在iframe框架下实现全局弹框

最新推荐文章于 2024-11-14 15:11:02 发布

转载最新推荐文章于 2024-11-14 15:11:02 发布 · 670 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tomtang/p/4453407.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何在iframe框架中实现全局弹框功能，通过在index页面增加父级iframe并调整布局，使得弹框能够在所有页面内显示。具体步骤包括将原有index页面内容迁移至新创建的msg页面，并在index中仅保留iframe结构，从而实现在不同页面间的统一提示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司使用的是iframe的框架来写的后台，即包含top，left，right，bottom，想要实现有消息时出现弹框，该弹框在所有的页面内都可以显示，现有实现方式如下：

原先的布局为在index页面设置的iframe等参数：

<frameset rows="64,750,*" frameborder="NO" border="0" framespacing="0">
   <frame src="top.aspx" noresize="noresize" frameborder="NO" name="topFrame" scrolling="no" marginwidth="0" marginheight="0" target="main" />
<frameset cols="200,*" rows="750,*" id="frame">
   <frame src="left.aspx" name="leftFrame" noresize="noresize" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" target="main" border="0" />
   <frame src="right.aspx" name="main" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" target="_self" border="0" />
</frameset>
<frame src="bottom.aspx" noresize="noresize" frameborder="NO" name="bottomFrame" scrolling="no" marginwidth="0" marginheight="0" target="main" />
</frameset>
<noframes>
    <body>
       <div>很抱歉，您使用的浏览器不支援框架功能，请转用新的浏览器。</div>
    </body>
</noframes>

现在为了实现弹出框在全局出现我们就要在index加一个父级iframe，把弹出框写在index中，然后把原有的index中的内容移动到另一个页面中msg中，

msg中的代码变为上面index中的代码，msg中的代码如下：

转载于:https://www.cnblogs.com/tomtang/p/4453407.html