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

来源:互联网 发布:java maven 配置 编辑:程序博客网 时间:2024/06/06 06:47

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);

0 0
原创粉丝点击