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 相关文章推荐
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
正则表达式基础与常用验证表达式
Jun 16 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
YII模块实现绑定二级域名的方法
2014/07/09 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
js实现上传图片预览的方法
2015/02/09 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis