Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法就需要分为如下几个步骤：
第一步：HTML结构
在HTML中定义一个弹出层的结构，代码如下：
<div id="popup-container">
<div id="popup-content">
<h2>弹出层标题</h2>
<p>弹出层内容</p>
</div>
</div>
其中 popup-container 是弹出层的容器，popup-content 是弹出层的具体内容。
第二步：CSS样式
通过CSS设置弹出层的样式，让其可以水平垂直居中并且添加半透明遮罩效果，代码如下：
#popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 5px;
}
其中 popup-container 设置为 position: fixed，top: 0，left: 0，width: 100% 和 height: 100% 可以让其覆盖整个屏幕，background: rgba(0, 0, 0, 0.5) 可以添加半透明黑色遮罩。
popup-content 设置为 position: absolute，top: 50%，left: 50% 和 transform: translate(-50%, -50%) 可以让其水平垂直居中，background: white 设置为白色背景，padding: 20px 和 border-radius: 5px 可以添加一些样式。
第三步：JS实现弹出层
通过JS代码实现点击触发弹出层的效果，代码如下：
const btn = document.getElementById('popup-btn');
const container = document.getElementById('popup-container');
btn.addEventListener('click', function() {
container.style.display = 'block';
});
其中 popup-btn 是触发弹出层的按钮，popup-container 是弹出层的容器，通过 addEventListener 监听按钮的点击事件，然后将 container 样式的 display 设置为 block 就可以显示弹出层了。
示例
示例一
<!DOCTYPE html>
<html>
<head>
<title>弹出层示例一</title>
<style>
#popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 5px;
}
#popup-btn {
display: block;
width: 150px;
height: 40px;
background: #2ecc71;
color: white;
font-size: 16px;
text-align: center;
line-height: 40px;
border-radius: 5px;
margin: 50px auto 0;
cursor: pointer;
}
</style>
</head>
<body>
<button id="popup-btn">点击弹出层</button>
<div id="popup-container">
<div id="popup-content">
<h2>这是一个弹出层</h2>
<p>你可以在这里放置内容。</p>
<button id="popup-close-btn">关闭弹出层</button>
</div>
</div>
<script>
const btn = document.getElementById('popup-btn');
const container = document.getElementById('popup-container');
const closeBtn = document.getElementById('popup-close-btn');
btn.addEventListener('click', function() {
container.style.display = 'block';
});
closeBtn.addEventListener('click', function() {
container.style.display = 'none';
});
</script>
</body>
</html>
示例二
<!DOCTYPE html>
<html>
<head>
<title>弹出层示例二</title>
<style>
#popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 5px;
}
#popup-btn {
display: block;
width: 150px;
height: 40px;
background: #3498db;
color: white;
font-size: 16px;
text-align: center;
line-height: 40px;
border-radius: 5px;
margin: 50px auto 0;
cursor: pointer;
}
</style>
</head>
<body>
<button id="popup-btn">点击弹出层</button>
<div id="popup-container">
<div id="popup-content">
<h2>这是另一个弹出层</h2>
<p>你可以在这里放置更多内容。</p>
<button id="popup-close-btn">关闭弹出层</button>
</div>
</div>
<script>
const btn = document.getElementById('popup-btn');
const container = document.getElementById('popup-container');
const closeBtn = document.getElementById('popup-close-btn');
btn.addEventListener('click', function() {
container.style.display = 'block';
});
closeBtn.addEventListener('click', function() {
container.style.display = 'none';
});
</script>
</body>
</html>
以上就是制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法及示例说明。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法 - Python技术站
微信扫一扫 
支付宝扫一扫 