炫酷弹窗效果制作

 

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

image      

      是不是很神奇,其中起作用的代码就这一行 -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();
})

      这样是不是就完了?很明显不是,看控制台

image

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

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

转载于:https://www.cnblogs.com/mopagunda/p/6042361.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402707.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Javascrip之匿名函数

前面讲过&#xff0c;定义函数的方式有两种&#xff1a;一种是函数声明&#xff0c;另一种是函数表达式。函数声明&#xff1a; 123function functionName(arg0,arg1,arg2){ //函数体 }关于函数声明,一个重要的特征就是函数声明提升&#xff0c;意思就是在执行代码之前会先读取…

vue组件化通信之兄弟组件传值

vue组件化通信之父向子传值 vue组件化通信之子向父传值 在vue中兄弟节点传值一般有两种方法&#xff1a;$parent和 $root&#xff0c; 建议使用前者 使用$parent **parent.vue** <template><div><childTest></childTest><anotherChildTest>&l…

解决 Tomcat 添加 Cookie 域名报错问题 : CookieProcessor

From: https://blog.csdn.net/liqing0013/article/details/86489802 解决 Tomcat 添加 Cookie 域名报错问题 : CookieProcessor 环境 报错情况 原因分析 解决办法 环境 Java 8 Tomcat 8.5 报错情况 抛出 IllegalArgumentException 具体信息如下&#xff1a;…

选择版本Win7系统VS2010下搭建qt开发环境

这几周一直在研究选择版本之类的问题,下午正好有机会和大家共享一下. win7下vs2010搭建qt环境总算成功了&#xff0c;在此分享一下。 最初选择了VS2012 qt-windows-opensource-5.0.2-msvc2012_64-x64-offline.exe &#xff0b; qt-vs-addin-1.2.1-opensource.exe 一路安装成功…

项目中常用正则(手机号、身份证、金额等)

包含0的正整数 /^([1-9]\d*|[0]{1,1})$/ 不包含0的正整数 /^[1-9]\d*$/ 金额。最多两位小数 /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/ 身份证验证 /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3…

升级到 Tomcat 8 后 Cookie 可能出现的问题

From: http://www.lichenliang.top/tomcat-8-invalid-character-cookie-value.html 问题场景 之前运行在 Tomcat 7 中的 Web 项目&#xff0c;当把 Tomcat 从 7 升级到 8.x 及更高版本后&#xff0c;用户登录失败&#xff0c;后台报异常&#xff1a; java.lang.IllegalArgume…

MySQL 主从同步故障处理-小记

今有运维同学反应&#xff0c;某业务主从复制&#xff08;一主两从&#xff09;延迟较大&#xff1b;MySQL master&#xff1a;5.0.82 Slave&#xff1a;5.0.88首先指出DB的数据量还是几十G的大小&#xff0c;网络没有问题&#xff0c;OS系统负载小&#xff0c;IO没有吃紧&…

学习 Spring Boot:(二十九)Spring Boot Junit 单元测试

From: https://blog.wuwii.com/springboot-test.html 前言 JUnit 是一个回归测试框架&#xff0c;被开发者用于实施对应用程序的单元测试&#xff0c;加快程序编制速度&#xff0c;同时提高编码的质量。 JUnit 测试框架具有以下重要特性&#xff1a; 测试工具测试套件测试运…

程序员容易不能生育?

最近一直看宝贝这部电视剧。里面的孙哲也是写程序的&#xff0c;结果不容易生育。医生从检查结果中就猜出来他是搞IT的。虽然这个只是电视剧中的剧情。但在现实生活中&#xff0c;程序员的身体素质确实不好。我自身就有体会。毕业写了几年程序以后&#xff0c;身体素质直线下降…

Java 中的并发工具类

From: https://blog.wuwii.com/juc-utils.html java.util.concurrent 下提供了一些辅助类来帮助我们在并发编程的设计。 学习了 AQS 后再了解这些工具类&#xff0c;就非常简单了。 jdk 1.8 等待多线程完成的CountDownLatch 在 concurrent 包下面提供了 CountDownLatch 类&…

[转载] 七龙珠第一部——第063话 悟空大反击

转载于:https://www.cnblogs.com/6DAN_HUST/archive/2013/05/28/3102943.html

如何通过Maven的Jetty插件运行Web工程

From: https://blog.wuwii.com/maven-jetty.html Jetty 是一个开源的servlet容器&#xff0c;它为基于Java的web容器&#xff0c;例如JSP和servlet提供运行环境。Jetty是使用Java语言编写的&#xff0c;它的API以一组JAR包的形式发布。开发人员可以将Jetty容器实例化成一个对象…

apache php mysql codeigniter smarty 记录方便查询

windows:apache apache:关于apache状态<Location /server-status>SetHandler server-statusOrder deny,allowDeny from allAllow from 127.0.0.1 </Location> restart apache; 2.apache:关闭自动目录列表 #Options Indexes FollowSymLinks#更换为Options -Indexes…

如何通过Maven的Tomcat插件运行Web工程

From: https://blog.wuwii.com/maven-tomcat.html Tomcat 服务器是一个免费的开放源代码的Web 应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和调试JSP 程序的首选。对于一个初学者来说&…

DUMPE2FS(8)

为什么80%的码农都做不了架构师&#xff1f;>>> DUMPE2FS(8) DUMPE2FS(8) NAME dumpe2fs - dump ext2/ext3/ext4 filesystem information SYNOPSIS dumpe2fs [ -bfhixV ] [ -o superblocksuperblock ] [ -o blocksizeblock- size ] …

lombok踩坑与思考

From: https://www.cnblogs.com/wuyuegb2312/p/9750462.html 虽然接触到lombok已经有很长时间&#xff0c;但是大量使用lombok以减少代码编写还是在新团队编写新代码维护老代码中遇到的。 我个人并不主张使用lombok&#xff0c;其带来的代价足以抵消其便利&#xff0c;但是由…

scheme 学习:红黑树

这几天继续学习scheme&#xff0c;scheme中虽然有hashtable但没有类似C中的map,于是把C版本中的红黑树移植到scheme(中间也发现了C版本中的一些问题&#xff0c;暂时懒得调整了^()^) 以作为后序set和表格驱动设计中表格的基础数据结构. 虽说这个红黑树在C版本中是调试好的了&am…

Maven多模块,Dubbo分布式服务框架,SpringMVC,前后端分离项目,基础搭建,搭建过程出现的问题...

现互联网公司后端架构常用到SpringSpringMVCMyBatis&#xff0c;通过Maven来构建。通过学习&#xff0c;我已经掌握了基本的搭建过程&#xff0c;写下基础文章为而后的深入学习奠定基础。 首先说一下这篇文章的主要内容分为&#xff1a; 1、Maven多模块项目的创建&#xff1b; …

Maven的pom.xml文件结构之Build配置build

From: https://blog.csdn.net/taiyangdao/article/details/52374125 在Maven的pom.xml文件中&#xff0c;Build相关配置包含两个部分&#xff0c;一个是<build>&#xff0c;另一个是<reporting>&#xff0c;这里我们只介绍<build>。 1. 在Maven的pom.xml文件…

FineUI 将不再内置 ExtJS (严格遵守 ExtJS 的开源规则)

从下个版本起&#xff0c;FineUI 将不再内置 ExtJS &#xff0c;不过我会提供说明如何使用 ExtJS&#xff08;并单独提供精简版的 ExtJS 包供论坛用户下载&#xff09;&#xff0c;现有的程序升级到新版本将不受影响&#xff08;只需要将精简版的 extjs 文件夹拷贝到程序根目录…