CSS伪元素：用bckdrop自定义弹出窗口背景源码

::backdrop CSS伪元素:在任何处于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上）。backdrop伪元素一个尚未完全支持的伪元素。学习如何使用::backdrop伪元素的背景下弹出模式。全屏元素 是 top layer堆中的一部分， 他们处于其他所有内容的上层。::backdrop 伪元素可用来给下层文档设置样式或隐藏它。

1、导入jquery

2、写html的dialog

dialog#dialog>

p>::backdrop伪元素
button.modalClose>关闭

3、内容+Modalbutton

div.container>

p>阿道夫阿飞阿道夫阿飞阿道夫阿道夫……

p>阿道夫阿道夫阿道夫阿道夫阿道夫阿道夫……

button.btnModal>点击打开对话框

4、jquery的modal代码

5、button:focus{
outline:0;
}

6、.btnModal,.modalClose{
padding:10px;
background-color:darkgreen;
color:white;
border:none;
border-radius:8px;
}

7、.container{
width:600px;
margin:0 auto;
}

8、dialog::backdrop{
position:fixed;
top:0px;right:0px;bottom:0px;left:0px;
background:rgba(0,0,0,0.8);
/*255 红色*/
}

知识点：

caniuse.com查看那些浏览器兼容

转载请注明：林雍岷 » CSS伪元素：用bckdrop自定义弹出窗口背景源码