位置: 编程技术 - 正文
使用jQuery制作遮罩层弹出效果的极简实例分享(jqueryfilter)
编辑：rootadmin推荐整理分享使用jQuery制作遮罩层弹出效果的极简实例分享(jqueryfilter)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js实现遮罩效果,js遮罩效果,jqueryfilter,jqueryfilter,js实现遮罩效果,jquery弹出div遮罩层,ajax设置遮罩效果,jquery弹出div遮罩层,内容如对您有帮助，希望把文章链接给更多的朋友！
客户的网站上突然需要一个遮罩弹窗效果，也可以称作暗箱之类的，具体效果就是网页中背景变成半透明，然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见，例如：QQ空间浏览相册等。这种效果的好处就是，可以让用户聚焦到弹出的菜单中。
神说，有代码的文章，应该有个 Demo ，于是就有了Demo。
HTML 结构
首先先来分析一下这个过程：触发某个事件（例如点击按钮），然后出现一个背景遮罩上面还有一个内容层。触发的按钮，我在这里用 div 来代替，并且使用 click 点击事件来演示。那么我们的 HTML 结构就很明确了。
CSS 代码
对于遮罩效果的 CSS 代码是最关键的。遮罩用到了两个 div ，一个作为背景，要覆盖整个网页，另一个是内容显示层，通常要居中处理。
简单解释一下，首先要隐藏起来，之后用 jQuery 触发显示。之后指定 position 的属性为 fixed，因为这样，才能激活 top 、left 、bottom 、right 、z-index这些属性，同时可以设置 width 、height 为 % 来实现覆盖整个网页。通常情况下，一般用 absolute 属性值来实现这种效果，因为它的兼容性更好。但是在实际应用当中，当页面很长，往下滚动的时候，使用 absolute 遮罩层也会跟随滚动。对于内容层来说，比较简单，指定宽度和高度用负边距来使其居中显示。特别要注意一点，背景层的半透明使用的是 opacity 属性，因为使用这个属性可以更好的用 jQuery 来控制。但是 fixed 、opacity 都是早期 IE 浏览器不支持的。
jQuery 代码
分析一下遮罩的交互操作，无非就是点击弹出，然后点击一下遮罩，消失。那么就直接对 CSS 进行操作即可。
这里直接使用 CSS 方法，当点击的时候改变 display 属性，此外还有很多实现方法，不再赘述。完成这些，当我们点击“点击这里”之后，就可以看到效果了。更多技巧和方法
更平缓的显示：
点击之后，突然出现并不是一个好方法。所以我又增加了一个按钮，点击之后通过 fadeIn、fadeOut 方法来控制渐隐。
这样简单的方法，就增强了用户体验。当然，还有一些更高级的效果可以实现。
基于jQuery倒计时插件实现团购秒杀效果 倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天
jQuery Easyui 验证两次密码输入是否相等 什么是jQueryEasyUIjQueryEasyUI框架提供了创建网页所需的一切，帮助您轻松建立站点。easyui是一个基于jQuery的框架，集成了各种用户界面插件。easyui提供建
使用jQuery制作浮动工具栏的实例分享 现在大家在浏览网站的时候，经常会发现一些浮动的条状栏，通常具有向上向下的功能，当你点击一下，就可以方便的回到顶部或者前往底部。其实打
标签: jqueryfilter
本文链接地址:https://www.jiuchutong.com/biancheng/386558.html 转载请保留说明！
