弹框和遮罩层的写法
文章图片
你还没有提交信息哦~
这份月饼您不要了吗？
css:原理就是最大的盒子是遮罩层，然后给他fixed定位，并让他占满全屏，背景用rgba；弹框的话就是给相对定位，因为里面的图片文字都是绝对定位，弹框的背景图可以用图片来展示。
.cover{
background:#000;
background: rgba(0,0,0,0.5);
filter: alpha(opacity=50);
/**这个是为IE6设的，可取值在0-100***/
position: fixed;
width: 100%;
height: 100%;
top:0;
left: 0;
color: #fff;
display: none;
}
.cover-box{
width: 80%;
position: relative;
top:35%;
left: 10%;
text-align: center;
}
.cover-bg{
display: block;
width: 100%;
max-width: 480px;
margin:0 auto;
}
.cover-title{
width: 100%;
max-width: 480px;
font-size:1.9rem;
position: absolute;
top:42%;
height: 2rem;
line-height: 2rem;
}.cover-text{
width: 100%;
max-width: 480px;
position: absolute;
top:57%;
line-height: 1.8;
font-size:1.4rem;
}
【弹框和遮罩层的写法】js
$('.cover').on('click', function () {
$('.cover').stop().hide();
})//这个是点击遮罩层就关闭
推荐阅读
- 急于表达——往往欲速则不达
- 第三节|第三节 快乐和幸福（12）
- 20170612时间和注意力开销记录
- 2.6|2.6 Photoshop操作步骤的撤消和重做 [Ps教程]
- 对称加密和非对称加密的区别
- 眼光要放高远
- 樱花雨
- 前任
- 2020-04-07vue中Axios的封装和API接口的管理
- 烦恼和幸福