下面我会详细讲解“js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)”的完整攻略。
1. 实现思路
首先,要实现遮罩居中弹出层,我们需要使用CSS实现弹出层的样式,用JS实现弹出层的位置和滚动条滚动的效果。具体步骤如下:
- 定义一个遮罩层的样式
mask
,设置background
为半透明的黑色,并将它的z-index
设为比页面上其他元素的z-index
要高。 - 定义一个弹出层的样式
dialog
,设置position
为fixed
,left
和top
都为50%,即把它放在屏幕的中央位置。 - 使用JavaScript为弹出层定位,通过
offsetWidth
和offsetHeight
获取弹出层的宽度和高度。同时,使用scrollHeight
和scrollTop
可以获取页面的滚动高度。这样就可以让弹出层跟着页面滚动条滚动。
2. 示例说明
示例一
我们以一个简单的登录框为例,来演示如何实现遮罩居中弹出层。
<!-- HTML代码 -->
<button id="showBtn">显示登录框</button>
<div id="mask"></div>
<div id="dialog">
<h3>登录</h3>
<form>
<label>用户名:</label>
<input type="text" name="username">
<br>
<label>密码:</label>
<input type="password" name="password">
<br>
<button type="submit">登录</button>
</form>
</div>
/* CSS代码 */
#mask {
display:none;
position:fixed;
top:0;
left:0;
z-index:9999;
background:rgba(0,0,0,0.5);
}
#dialog {
display:none;
position:fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width:300px;
height:200px;
z-index:10000;
background-color:#fff;
padding:20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
text-align:center;
}
// JavaScript代码
window.onload = function() {
var showBtn = document.getElementById('showBtn');
var dialog = document.getElementById('dialog');
var mask = document.getElementById('mask');
// 显示登录框
showBtn.onclick = function() {
mask.style.display = 'block';
dialog.style.display = 'block';
// 让弹出层居中
dialog.style.marginTop = -dialog.offsetHeight/2 + 'px';
dialog.style.marginLeft = -dialog.offsetWidth/2 + 'px';
// 监听窗口大小改变事件,重新居中
window.onresize = function() {
dialog.style.marginTop = -dialog.offsetHeight/2 + 'px';
dialog.style.marginLeft = -dialog.offsetWidth/2 + 'px';
}
// 监听滚动条滚动事件,让弹出层跟随滚动
window.onscroll = function() {
dialog.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight/2 - dialog.offsetHeight/2 + 'px';
}
}
// 隐藏登录框
mask.onclick = function() {
mask.style.display = 'none';
dialog.style.display = 'none';
}
}
在示例一中,我们首先定义了一个登录框的HTML代码,并使用CSS样式设置了弹出层的样式和遮罩层的样式。然后,我们使用JS实现了弹出层的居中定位及跟随滚动。最后,我们通过监听点击事件实现了点击遮罩层隐藏登录框。
示例二
下面,我们再以一个图片展示为例,来演示如何实现遮罩居中弹出层。
<!-- HTML代码 -->
<div class="container">
<img src="https://picsum.photos/id/237/200/300" alt="图片" class="img">
<div class="mask"></div>
<div class="dialog">
<img src="https://picsum.photos/id/237/400/600" alt="大图" class="big-img">
</div>
</div>
/* CSS代码 */
.container {
position:relative;
margin:0 auto;
width:200px;
height:300px;
}
.img {
width:100%;
height:100%;
}
.mask {
display:none;
position:absolute;
top:0;
left:0;
z-index:999;
background:rgba(0,0,0,0.5);
width:100%;
height:100%;
}
.dialog {
display:none;
position:fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
z-index:1000;
}
.big-img {
display:block;
max-width:80%;
max-height:80%;
}
// JavaScript代码
window.onload = function() {
var img = document.querySelector('.img');
var dialog = document.querySelector('.dialog');
var mask = document.querySelector('.mask');
var bigImg = document.querySelector('.big-img');
// 显示大图
img.onclick = function() {
mask.style.display = 'block';
dialog.style.display = 'block';
bigImg.src = img.src;
}
// 隐藏大图
mask.onclick = function() {
mask.style.display = 'none';
dialog.style.display = 'none';
}
// 监听滚动条滚动事件,让弹出层跟随滚动
window.onscroll = function() {
dialog.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight/2 - dialog.offsetHeight/2 + 'px';
}
}
在示例二中,我们首先定义了一个图片的HTML代码,并使用CSS样式设置了图片、遮罩层和弹出层的样式。然后,我们使用JS实现了点击图片弹出大图,并对大图进行居中定位及跟随滚动。最后,我们通过监听点击事件实现了点击遮罩层隐藏大图。
3. 攻略总结
通过以上示例,我们可以总结出JS+CSS实现遮罩居中弹出层(随浏览器窗口滚动条滚动)的攻略:
- 首先,使用CSS样式设置遮罩层和弹出层的样式。
- 然后,使用JS实现弹出层的居中定位及跟随滚动。
- 最后,通过监听点击事件实现了点击遮罩层隐藏弹出层。
这样就可以实现一个完美的遮罩居中弹出层了。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) - Python技术站