做项目中遇到两次d出框遮罩层的问题。有嵌套的 d出框。表单是一层d框，然后图片放大是一层d框，两层d框同时出现就会出现下面问题
问题前
Dialog 对话框
https://element.eleme.cn/2.15/#/zh-CN/component/dialog#events
只要在第二次d框上面加上属性
问题解决后
多层d框加属性modal-append-to-body 就可以了
总之一句话，如果你打开d出框之后有一层遮罩那么用 modal-append-to-body 可以解决。
如果是多层的话 用 append-to-body解决
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#cover{
position: fixed
top: 0
left: 0
height: 100%
width: 100%
background-color: rgba(0,0,0,0.3)
display:none
z-index:1000
}
</style>
</head>
<body>
<button>这是一个按钮</button>
<div id="cover">这是一个遮罩</div>
<script>
var btn=document.getElementsByTagName('button')[0]
btn.addEventListener('click',function(){
var cover=document.getElementById('cover')
cover.style.display='block'
setTimeout(function(){
cover.style.display='none'
},5000)
})
</script>
</body>
</html>
通过jquery的show()和hide()函数联合使用，实现d出窗口。
一、show（）和hide（）函数解析：
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。
二、设计一个HTML页面，包括一个简单的d出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：
三、设计遮罩层的样式，如下：
四、d出窗口的css样式，代码如下：
五、初始页面如下：
六、点击按钮，查看d出窗口结果：
七、关闭d出窗后，打开开发者中心，如下：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）