在Vue开发中出现对话框被遮罩层挡住问题的解决教程

Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住，无论是Element-UI dialog还是bootstrap的Modal，如下图所示：

造成这个问题的原因是对话框组件的父元素的position有fixed或者relative值，比较简单易行的办法如下：对于bootstrap Modal需要添加css语句

.modal-backdrop { z-index: -1;}

而对于Element UI该组件已经在属性层面提供了解决办法，只要添加:modal-append-to-body="false"就可以了。

我们开发的时候，经常会遇得到一些网站，头部和尾部一毛一样，这样头部尾部相同的网站，怎么都不可能把头部和尾部重新书写一遍吧，不仅浪费时间还显示的是自己的网站代码重复率比较多，显示自己没有水平。下面长沙前端培训班分享：iframe中的二级菜单被遮盖怎么办：

解决这个问题首先需要我们经常会把这样重复的头部和尾部都单独提出来，制作成一个独立的网页，然后通过iframe框架进行引入。如果公共头部中有对应的一级导航和二级菜单导航的胡被遮住这可怎么解决呢？

各种网站和各种公众号上面方法使用了js，但是js比较麻烦，并且代码粘贴下来使用的时候会出现问题，跑不起来，接下来由我提供给你们一个简单快速高效的解决问题办法。那叫一个so easy；并且关键代码也给出了注释哟，值得你来查看。问题代码：

（一）公共头部----带有二级菜单

HTML源码

<div class="box">这里是logo</div>

<ul>

<li>你好

<ul>

</ul>

</li>

<li>我好

<ul>

</ul>

</li>

<li>大家好

<ul>

</ul>

</li>

<li>勇哥

<ul>

</ul>

</li>

<li>真的

<ul>

</ul>

</li>

<li>很帅

<ul>

</ul>

</li>

<li>好帅啊

<ul>

</ul>

</li>

<li>太帅了

<ul>

</ul>

</li>

<li>真的哦

<ul>

</ul>

</li>

<li>结束了

<ul>

</ul>

</li>

</ul>

</div>

CSS源码

<style>

*{margin:0;padding:0}

ul{list-style:none}

a{text-decoration: none;}

img{vertical-align: middle;}

.box{

width:1000px;

height:100px;

background-color: pink;

margin:0 auto;

font-size:50px;

font-weight: bold;

text-align: center;

line-height: 100px;

}

.layout{

height:60px;

background-color:cornflowerblue;

}

.layout>ul{

width: 1000px;

margin: 0 auto;

height:60px;

}

.layout>ul>li{

font-size:14px;

float: left;

width:100px;

text-align: center;

line-height: 60px;

border-right:1px dashed white;

box-sizing: border-box;

color:white

}

.layout>ul>li:last-child{

border-right:0px

}

.layout>ul>li>ul{

background-color: pink;

color:white;display: none;

}

.layout>ul>li:hover>ul{

display: block;

position: relative;

}

/* 取消滚动条 */

::-webkit-scrollbar{

display: none;

}

</style>

效果：

（二）公共主体----需要引入头部

HTML源码

我是独立的页面主体部分

</div>

CSS源码

*{margin:0;padding:0}

.tip{

height:500px;

background-color: yellowgreen;

text-align: center;

line-height: 500px;

font-size:80px;

font-weight:bold;

}

/*取消3像素间距*/

iframe{vertical-align: middle;}

/*取消滚动条*/

::-webkit-scrollbar{

display: none;

}

效果：

问题所在

描述：引入公共的头部之后，二级菜单，被主体区域内容给遮盖住了，使用js实现起来也是非常的困难的；

解决问题：描述如下

将在主体引入的头部页面中，引入的顺序改变一下，放在主体的后面；放在主体后面的话加载顺序就会出现问题，主体就会显示在主体后面。那如何调整顺序问题呢？使用固定定位，定位在引入页面的最上面，但是定位后也会把布局遮盖住，如何解决遮盖主体的问题呢，就是需要给主体添加margin-top;来解决问题，这样二级菜单就能显示出来了

修改后的主体代码：HTML

我是独立的页面主体部分

</div>

效果：加载顺序

修改代码：CSS

<style>

*{margin:0;padding:0}

.tip{

height:500px;

background-color: yellowgreen;

text-align: center;

line-height: 500px;

font-size:80px;

font-weight:bold;

/*修改的代码*/

margin-top:160px

}

iframe{vertical-align: middle;}

::-webkit-scrollbar{

display: none;

}

/*修改的代码*/

#one{

position:fixed;

top:0px;

width:100%;

height:500px;

}

</style>

效果：

以上就是：通过HTML和CSS来解决，iframe二级菜单被遮住的效果：关键代码就是调整顺序，和添加定位。

果在图片上显示文字，经常会遇到这个情况，就是当文字和背景颜色差不多时，文字会看不清楚，我们一般通过给文字加text shadow或者修改图片的透明度来让文字显示更加突出。我们今天说一下透明度的问题，一般我们干这个活儿是通过photoshop来做，其实CSS本身也可以实现类似的效果。如何做？

咱们先从下面这个例子开始，有一张背景图片，上面有些文字：

对应的显示效果如下：

可以看到，文字显示不是特别清晰，现在要给图片增加一层控制透明度，我们使用伪元素实现：

可以看到，加入了一层，inset是top, bottom, left, right的简写形式，将它们都设为0。通过这个设置，显示效果如下：

现在它把所有元素都盖住了，而我们需要文字在这层的上面，如果加入z-index:-1, 则这个层又跑到所有元素下面，看不到了。

要解决这个问题，我们需要引入一个关键CSS，isolation: isolate; 通过它来创建一个新的CSS堆叠上下文，从而使得这个层不会跑到外面，具体关于isolation, 我专门写过一个文章，这里可以直接查看详细信息：使用isolation: isolate来创建堆叠上下文

可以看到，这个层现在位于文字和图片中间，如下所示：

那现在就简单了，可以更改opacity来控制其透明度，

最后将颜色改为黑色，就达到了我们所期望的效果。

附上完整的CSS：

感谢阅读！

在线咨询

上一篇：HTML+PHP超大视频上传实例
下一篇：HTML5大显神通：8个3D视觉效果“让你好看”

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

在Vue开发中出现对话框被遮罩层挡住问题的解决教程

您的项目需求