Last Updated on 2019年10月9日

::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查看那些浏览器兼容

林雍岷

接近10年的互联网从业经验，精通Scrum敏捷软件开发的方法，从事互联网产品设计，开发，测试，运营，案例不少于20个，发现自己最喜欢的工作是做外贸营销，外贸SEO，特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术，只要加进来坚持学习零基础也能够学会。