第一版
1、弹窗内容盒子通过定位position:absolute;left:50%.....实现水平垂直居中。
2、类名popup盒子是通过javascript修改全局属性hidden来实现弹窗的显示与隐藏。
<div class="popup" hidden>
<div class="pop-wrap">弹窗内容</div>
</div>
<script>
//false为显示,true为隐藏
document.querySelector('.popup').hidden = false;
</script>
第二版
1、弹窗内容盒子通过Flexbox弹性布局实现水平垂直居中
.popup{
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background-color:rgba(0,0,0,.7);
display:flex;
}
.pop-wrap{
background-color:#fff;
margin:auto;
font-size:1.6rem;
width:16rem;
padding:5rem;
border-radius:.6rem;
}
MDN中全局属性hidden一文中有如下说明:
改变具有hidden属性的元素的CSS的 display 属性将覆盖该行为。 例如, 元素被设置为 display: flex 将会导致元素显示出来,尽管设置了hidden属性。
我泪奔了....
2、只能通过javascript修改popup盒子css的display:none|flex来实现弹窗的显示与隐藏。
功能是实现了,但老觉得有点Low。也可能是我遗忘了什么。。。
如果您是CSS新手,您使用的选择器可能仅限于类名,ID和通用元素。实际上,总共有38个CSS选择器,其复杂程度差别很大。有些选择器可能是我们很少使用的例如:empty伪类。
:empty
:empty伪类代表没有子元素的元素。子元素只可以是元素节点或文本(包括空格),但不包括html注释。浏览器兼容:IE9+
<!-- 这些将是空的 -->
<div></div>
<div><!-- comment --></div>
<!-- 这些将不能满足为空 -->
<div>foo</div>
<div> </div>
<div><span></span></div>
<div> <!-- comment --> </div>
:empty伪类的特性可以让我们联想到它非常适合在弹窗、消息提示框等场景下使用。可以根据上下文动态地插入和移除它们中的文本内容。使用:empty伪类,我们可以确保在没有内容的情况下,该框将被隐藏。
第三版
css表现:
.popup{
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background-color:rgba(0,0,0,.7);
display:flex;
}
.popup:empty{
display:none;
}
.pop-wrap{
background-color:#fff;
margin:auto;
font-size:1.6rem;
width:16rem;
padding:5rem;
border-radius:.6rem;
}
html结构:
<div class="popup"></div>
javascript行为:
//popup显示
document.querySelector('.popup').innerHTML = '<div class="pop-wrap">弹窗内容</div>';
//popup隐藏
//document.querySelector('.popup').innerHTML = '';