JS+CSS3制作炫酷的弹窗效果


Posted in Javascript onNovember 08, 2016

昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由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浏览器中查看

JS+CSS3制作炫酷的弹窗效果

      是不是很神奇,其中起作用的代码就这一行 -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-shadow:0px 0px 10px rgba(0,0,0,0.4);display:none}
.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制作炫酷的弹窗效果

      当我们弹出窗口外,肯定要禁止掉我们其他层的点击事件,但是我们发现目前我们虽然将其他层模糊化了,但是并没有禁止掉相应的事件,当然解决办法也很简单,我们可以加一层没有背景颜色的遮罩层,覆盖在页面上,这样我们每次点击作用在遮罩层上,自然不会触发底层的事件了。

点击这里查看效果   http://runjs.cn/detail/nrlmmnbg

以上所述是小编给大家介绍的JS+CSS3制作炫酷的弹窗效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 #Javascript
BootStrap table使用方法分析
Nov 08 #Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 #Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 #Javascript
bootstrapfileinput实现文件自动上传
Nov 08 #Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 #Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 #Javascript
You might like
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
django 创建过滤器的实例详解
2017/08/14 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
教育专业个人求职信
2013/12/02 职场文书
团日活动总结模板
2014/06/25 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
李白故里导游词
2015/02/12 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
员工离职证明范本
2015/06/12 职场文书
优秀志愿者感言
2015/08/01 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书