下面是JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法的完整攻略。
1. HTML结构
先看一下要实现的页面结构，包含了一个按钮和一个弹框：
<button id="showModal">打开弹框</button>
<div id="mask"></div>
<div id="modal">
<h2>弹框标题</h2>
<p>弹框内容</p>
<button id="closeModal">关闭</button>
</div>
其中，#mask是遮罩层，#modal是弹框层。
2. CSS样式
接下来先设置好基础的样式：
#mask {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
z-index: 9999; /* 比后面的内容都要高 */
display: none; /* 隐藏 */
}
#modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* 居中 */
z-index: 10000; /* 比遮罩层高 */
background-color: #fff; /* 白色背景 */
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 阴影 */
display: none; /* 隐藏 */
}
这里设置了遮罩层和弹框层的基础样式，并将它们都设为隐藏状态。
3. JS代码
接下来是JS的部分。
首先，我们需要使用JS监听按钮点击事件，来触发弹框的弹出：
var showModalBtn = document.getElementById('showModal');
var closeModalBtn = document.getElementById('closeModal');
showModalBtn.addEventListener('click', function() {
document.getElementById('mask').style.display = 'block';
document.getElementById('modal').style.display = 'block';
});
这里使用了addEventListener来监听按钮的点击事件，一旦点击就将遮罩层和弹框层的display属性都设置为block，显示出来。
然后，我们需要使用JS监听遮罩层的点击事件和关闭按钮的点击事件，来触发弹框的关闭：
document.getElementById('mask').addEventListener('click', function() {
hideModal();
});
closeModalBtn.addEventListener('click', function() {
hideModal();
});
function hideModal() {
document.getElementById('mask').style.display = 'none';
document.getElementById('modal').style.display = 'none';
}
这里使用了addEventListener来监听遮罩层的点击事件和关闭按钮的点击事件，一旦点击就调用hideModal函数，将遮罩层和弹框层的display属性都设置为none，隐藏起来。
4. 总结
以上就是JS+CSS实现弹出全屏灰黑色透明遮罩效果的完整攻略。通过设置基础样式和使用JS监听事件，我们能够实现弹框层的弹出和关闭，从而达到全屏灰黑色透明遮罩的效果。
以下是两个示例说明：
示例一
在CodePen上创建一个新的Pen，将以下代码复制到HTML部分：
<button id="showModal">打开弹框</button>
<div id="mask"></div>
<div id="modal">
<h2>弹框标题</h2>
<p>弹框内容</p>
<button id="closeModal">关闭</button>
</div>
将以下代码复制到CSS部分：
#mask {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
z-index: 9999; /* 比后面的内容都要高 */
display: none; /* 隐藏 */
}
#modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* 居中 */
z-index: 10000; /* 比遮罩层高 */
background-color: #fff; /* 白色背景 */
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 阴影 */
display: none; /* 隐藏 */
}
将以下代码复制到JS部分：
var showModalBtn = document.getElementById('showModal');
var closeModalBtn = document.getElementById('closeModal');
showModalBtn.addEventListener('click', function() {
document.getElementById('mask').style.display = 'block';
document.getElementById('modal').style.display = 'block';
});
document.getElementById('mask').addEventListener('click', function() {
hideModal();
});
closeModalBtn.addEventListener('click', function() {
hideModal();
});
function hideModal() {
document.getElementById('mask').style.display = 'none';
document.getElementById('modal').style.display = 'none';
}
这时点击运行就能看到一个按钮，点击后弹出一个带遮罩的弹框。
示例二
在一个普通的网页中，创建一个按钮和一个弹框，HTML部分如下：
<button id="showModal">打开弹框</button>
<div id="mask"></div>
<div id="modal">
<h2>弹框标题</h2>
<p>弹框内容</p>
<button id="closeModal">关闭</button>
</div>
在<head>标签内添加以下样式表：
<style>
#mask {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
z-index: 9999; /* 比后面的内容都要高 */
display: none; /* 隐藏 */
}
#modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* 居中 */
z-index: 10000; /* 比遮罩层高 */
background-color: #fff; /* 白色背景 */
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 阴影 */
display: none; /* 隐藏 */
}
</style>
在<body>标签内添加以下JS代码：
<script>
var showModalBtn = document.getElementById('showModal');
var closeModalBtn = document.getElementById('closeModal');
showModalBtn.addEventListener('click', function() {
document.getElementById('mask').style.display = 'block';
document.getElementById('modal').style.display = 'block';
});
document.getElementById('mask').addEventListener('click', function() {
hideModal();
});
closeModalBtn.addEventListener('click', function() {
hideModal();
});
function hideModal() {
document.getElementById('mask').style.display = 'none';
document.getElementById('modal').style.display = 'none';
}
</script>
这时刷新页面就能看到一个按钮，点击后弹出一个带遮罩的弹框。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 