::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自定义弹出窗口背景源码