1、弹出层的设计
使用的东西是很简单的，需要两个div，一个做为弹出层背景的，另一个做为在半透明背景上面一层显示内容的。
在底层半透明div样式：
显示内容的div样式（不重要）
jQuery的调用方式，在显示弹出框之前先把背景显示出来：
时间： 2024-08-01 12:58:43
jQuery给页面弹出层添加半透明背景
jQuery给页面弹出层添加半透明背景的相关文章
jQuery 插件开发——PopupLayer(弹出层)
导读:上次写了一篇关于GridView的插件开发方法,上几天由于工作需要,花了一天左右的事件封装了popupLayer(弹出层)插件.今天有时间就记录一下自己的开发思想与大家分享下,同时也算是对这段时间的工作概要吧. 就我在开发过程中的理解和开发的经验,一般常用的弹出层有三类(其实还有一类就是弹出可以输入内容的,但是这种可以被替代,所以就特别拿出来写了):Confirm.Alert.LoadContent(url).其中Alert又可以分成五种(当然也可以是四种),分别是: "error&quo
JS弹出层遮罩,隐藏背景页面滚动条细节优化
做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容. 一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度
Javascript实现页面弹出层效果
弹出层效果是一个很实用的功能,很多网站都采用了这种方式实现登录和注册,比如百度: 弹出层的特点:点击登录或注册的时候在页面的中间部分弹出一个登录或注册区域并且页面有一个遮罩层,而且登录框在遮罩层之上,也就是登陆框的z-index值要大于遮罩层的z-index值.当点击关闭或者遮罩层时关闭登录或者注册框(有的网页没有实现点击遮罩层关闭登录或注册区域的功能.). 最近也做了一个类似的弹出层的效果,先展示一下最终效果: 简单的说一下实现的过程. 首先是遮罩层.遮罩层是在页面动态加载的过程中创建的,因为
jQuery点击弹出层，弹出模态框，点击模态框消失
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>
一款基于jQuery的漂亮弹出层
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/ 1.效果示例 2.代码样式 1 /* 2 * 基于jquery iziModal弹出窗插件 3 * by [email protected] 4 */ 5 $(function (){ 6 dialog = { 7 title : "提示信息", 8 /** 9 * 提示
jquery 点击弹出层自身以外的任意位置，关闭弹出层
<!--弹出层---> <div class="mask"> <div class="wrap"></div> </div> /***弹出层效果***/ $(".header").find(".a5").click(function(e){ e.stopPropagation();//阻止冒泡 $('.mask').css("display"
jQuery layer[页面弹出框]
常见接口如下: 方法名 描述 $.layer({}) 核心接口,参数是一个对象,对象属性参见上述列表.诸如layer.alert()之类的为$.layer()的包装方法. layer.v 获取版本号. layer.ready(callback) layer中的样式文件装载完毕后执行的方法,一般用于页面加载时调用layer,这样可避免样式未加载即调用层导致的错乱. 示例: layer.ready(function(){ layer.msg('Hello Layer'); }); layer.ale
jQuery Layer mobile 弹出层
layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选择使用. 无需依赖任何库,只加载layer.m.js即可 小巧玲珑,性能卓越.柔情似水- 具备无以伦比的自适应功能 灵活的皮肤自定义支撑,充分确保弹层风格多样化 丰富.科学的接口,让弹弹弹层无所不能 版本Layer mobile1.8 作者:闲心贤 github 在线实例 实例预览 layer弹层组
弹出层，阻止页面滚动--阻止事件冒泡
今天要实现一个效果:点击图片后弹出一个浮层,该浮层内容比较多,设置overflow:auto;希望浮层滚动的时候,底层的页面是不动的.在网上查了很多,都没有找到解决方案,有人在问,但是并没有人回答.所以特地跑去问了师傅,在这里分享一下,希望遇到同样问题的小白,可以有所帮助. 首先,把底层页面放在一个div中,包起来,设置它的css样式: 1 #main{ 2 position: fixed; 3 width: 100%; 4 top:0; 5 height:100%; 6 z-index:1;