码迷,mamicode.com
首页 > 其他好文 > 详细

自定义弹出层居中并显示遮罩

时间:2014-12-12 11:47:49      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:io   color   os   sp   on   div   cti   ad   ef   

1.自己先定义两个div,一个是用来放弹出层内容的,一个是用于设置遮罩层颜色的,一个触发显示弹出层的按钮

2.给两个div分别设置css样式,遮罩的样式主要有:position:fixed;z-index:2;background-color:#000;opacity:0.7;top:0;left:0;width:100%;height:100%;display:none;

显示弹出层内容的主要有:postion:fixed;display:none;top:50%;left:50%;z-index:3;background-color:#fff

3.写js,在$(function(){...});在页面加载事件里面写按钮的click事件,那么就直接$("#content").fadeIn(200);$("#bg").fadeIn(200);显示弹出层和遮罩

点击遮罩任意位置隐藏层和遮罩那么如下:$("#content").fadeOut(200);$("#bg").fadeOut(200);

自定义弹出层居中并显示遮罩

标签:io   color   os   sp   on   div   cti   ad   ef   

原文地址:http://blog.csdn.net/luohuajiexiejuan/article/details/41890691

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!