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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
javascript刷新父页面方法汇总详解
Oct 10 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中动态显示签名和ip原理
2007/03/28 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
javascript 实现map集合
2015/04/03 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python之str操作方法(详解)
2017/06/19 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
公司晚会主持词
2014/03/22 职场文书
员工年终自我评价
2014/09/14 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL
python 安全地删除列表元素的方法
2022/03/16 Python