CSS 实现遮罩层弹窗效果

2023-08-28 02:53| 来源: 网络整理| 查看: 265

原理：

写一个遮罩功能div，宽度高度均为100%，设置背景色，设置透明度，设置z-index 值为倒数第二大，目的为了在倒数第二层，把页面显示的内容给盖住！

写一个弹出功能div，设置z-index 值为最大，目的要显示在最上层！

html代码：

显示页面的全部内容打开弹框 //页面的遮罩层 //页面的弹出框关闭弹框

jquery代码：

$(document).ready(function(){ $("#open").click(function() { cover.style.display="block"; //显示遮罩层 modal.style.display="block"; //显示弹出层 }) $("#close").click(function() { cover.style.display="none"; //隐藏遮罩层 modal.style.display="none"; //隐藏弹出层 }) })

CSS代码：

#cover{ position:absolute;left:0px;top:0px; background:rgba(0, 0, 0, 0.4); width:100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/ height:100%; filter:alpha(opacity=60); /*设置透明度为60%*/ opacity:0.6; /*非IE浏览器下设置透明度为60%*/ display:none; z-Index:999; } #modal{ position:absolute; width:500px; height:300px; top:50%; left:50%; background-color:#fff; display:none; cursor:pointer; z-Index:9999; }

【本文地址】

公司简介

联系我们