首页 > 代码库 > 自定义弹出层居中并显示遮罩
自定义弹出层居中并显示遮罩
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);
自定义弹出层居中并显示遮罩
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。