最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

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

CSS学习系列 林雍岷 156浏览

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