bootstarp后台界面iframe模态框遮罩问题

最新推荐文章于 2020-11-28 04:03:50 发布

原创最新推荐文章于 2020-11-28 04:03:50 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

18 篇文章

订阅专栏

bootstrap

2 篇文章

订阅专栏

本文介绍了如何解决Bootstrap后台界面中，iframe模态框只显示在iframe区域的问题。通过设置iframe、导航和侧边菜单的z-index，实现了模态框全屏显示。当模态框打开时，提升iframe区域的z-index，关闭时恢复默认值，确保不被导航和侧边菜单遮挡。

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

问题如下图：

模态框代码写在子页面中才会出现这种情况，因为iframe中的模态框只显示在iframe区域。其实百度看了一些解决方法感觉挺麻烦的，自己想了下发现其实可以很简单的解决。

思路：frame中的模态框只显示在iframe区域 =》让frame区域覆盖整个页面 =》导航和侧边菜单使用定位 =》默认情况下frame区域（position: relative）的z-index值小于导航和侧边菜单的z-index值=》模态框显示时只要让frame区域的z-index大于导航和侧边菜单的z-index值便可 =》模态框隐藏时恢复默认z-index值

上代码：

html：

<div id="wrapper">
        <!--头部导航和侧边菜单-->
        <nav class="navbar">
            <!--头部导航-->
            <div class="nav">
            </div>
            <!--/头部导航-->
            <!--侧边菜单-->
            <div class="sidebar">
                <div class="sidebar-nav">
                    <ul class="nav">
                        <li><a href="#">菜单</a></li>
                        <li><a href="#">菜单</a></li>
                        <li><a href="#">菜单</a></li>
                        <li><a href="#">菜单</a></li>
                    </ul>
                </div>
            </div>
            <!--/侧边菜单-->
        </nav>
        <!--/头部导航和侧边菜单-->
        <!--iframe-->
        <iframe id="mainIframe" src="index/index.html" frameborder="0" scrolling="auto">
           
        </iframe>
        <!--/iframe-->
    </div>

css：

.navbar{
    min-height: 60px;
    font-size: 14px;
    background: #438eb9;
    position: absolute;
    width: 100%;
    z-index: 1000;
}
.sidebar{
position: absolute;
    width: 200px;
    margin-top: 60px;
}
#mainIframe {
    width: 100%;
    position: relative;
    z-index:100
}

还有注意的是为了不让导航和侧边菜单遮到iframe的内容，所以要设置iframe页面中的body的padding值：

body {
    padding: 60px 0 0 200px;
}

js:

以下代码我是放在所有iframe页面都会引用的一个公共js文件中：

$('.modal').on('show.bs.modal',function(){
    window.parent.$('#mainIframe').css('z-index',99999);
  })
  $('.modal').on('hidden.bs.modal',function(){
    window.parent.$('#mainIframe').css('z-index',100);
  })

完成！！！