JS+CSS3制作炫酷的弹窗效果
昨天在家看电视时，退出的时候发现了⼀个弹窗效果，整个背景模糊，觉得这样的效果好炫，要⽐纯⾊加透明度⾼⼤上好多，连续试了⼏个界⾯，最终确定效果由css实现的，于是今天⼀⼤早来到公司便
赶紧搜索了⼀下，虽然兼容性奇差，但是⼀个css属性就可以搞定。瞬间感觉⾃⼰知道的真是太少了~~
⾸先回忆⼀下弹窗的实现，⼀般我们分为两层，弹出窗⼝层（popus）和遮罩层（mask），通常情况下我习惯就这两元素全部设成fixed定位，具体和absolute区别⼀试便知。对于mask层⾃不⽤多少，
我们如下给他设置属性，让他铺满整个屏幕。
.mask{position:fixed;top:0px;bottom:0px;left:0px;right:0px;background-color:#000;opacity:0.6;filter:alpha(opacity=60)}
popus层则要稍微⿇烦点⼉，这⾥我们有两种实现⽅法
自动弹窗代码1.已知⼤⼩的弹窗，如下，主要通过top,left与负的margin来实现。
.popus{width:300px;height:200px;position:fixed;left:50%;top:50%;margin-left:-150px;margin-top:-100px;background-color:#000}
2.未知弹窗⼤⼩，则通过js获取弹窗层的width与height，然后在进⾏如上设置，在此不多述。
3.在⽀持css3的情况下，我们不需要知道弹窗的宽⾼，便可进⾏如下设置
.popus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}
主要通过translate属性来设置，偏移的值百分⽐是相对于本⾝的宽⾼，因此从原理上来说跟第⼀种写法有异曲同⼯之妙，不过使⽤却更⽅便。
⾔归正传，下⾯我们回归到正题，即让元素实现ps中⾼斯模糊的效果。
这⾥引出⼀个css属性：filter，注意这⾥的filter并不是ie中的filter，filter有很多值，感兴趣的可以点击这⾥，作者讲的⾮常详细。我们今天只讲其中的⼀个blur，⾸先看下⾯的预览图
ps:⽬前来说该属性只⽀持webkit浏览器，所以我们直接使⽤了css3属性，效果也需要在webkit浏览器中查看
是不是很神奇，其中起作⽤的代码就这⼀⾏ -webkit-filter:blur(8px) ，后⾯的像素值即代表模糊程度，当然在⽇常项⽬中，我们还可以加⼀些动画，使页⾯更加的⽣动，本案例完整代码如下：
<div class='bg'>
<img src='bg.jpg' />
</div>
<div class='popus'>
效果是不是要好过纯⾊加透明呢
<div>
<div class='left btn '>确实不错</div>
<div class='right btn'>也就那样</div>
</div>
</div>
css：
*{padding:0px;margin:0px}
img{width:100%;margin:0px auto;display:block}
.bg.blur{-webkit-filter:blur(8px)}
.popus{width:400px;color:#000;;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);font-family:"微软雅⿊";padding:20px 0px;font-weight:bold;background-color:rgba(255,255,255,0.6);border-radius:18px;text-align:center;padding:30px 0px;box-.popus div{width:220px;margin:10px auto}
.popus div.btn{width:80px;padding:5px 10px;color:#000}
.left{float:left;border:1px solid #000}
.popus div.btn.right{float:right;color:#666}
js：
$('.bg').on('click',function(){
console.log(98)
$(this).addClass('blur');
$('.popus').show();
})
$('.btn').on('click',function(){
$('.bg').removeClass('blur');
$('.popus').hide();
})
这样是不是就完了？很明显不是，看控制台
当我们弹出窗⼝外，肯定要禁⽌掉我们其他层的点击事件，但是我们发现⽬前我们虽然将其他层模糊化了，但是并没有禁⽌掉相应的事件，当然解决办法也很简单，我们可以加⼀层没有背景颜⾊的遮
罩层，覆盖在页⾯上，这样我们每次点击作⽤在遮罩层上，⾃然不会触发底层的事件了。
以上所述是⼩编给⼤家介绍的JS+CSS3制作炫酷的弹窗效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。