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

::backdrop CSS伪元素

Last Updated on

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

Last modified: 2019年10月9日

前一篇

CSS学习系列

网页设计师必备CSS样式库:Normalize.css

Normalize.css:网页设计师必备CSS样式库重置样式达到规范化,需要的原因是浏览器通常会用某些元素的默认样式,他们所谓的,不同浏览器的用户代理样式表可能会有所不同。

...

后一篇

CSS学习系列

CSS伪元素:selection的用法

selection的用法:应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。注意:E9+, Opera, Google Chrome和Safari支持::selection选择器,Firefox 通过其私有属性 ::-moz-selection 支持。

...