"JS CSS实现居中弹出层随滚动条滚动示例"
版权申诉
73 浏览量
更新于2024-04-17
收藏 17KB DOCX 举报
本文介绍了如何使用JavaScript和CSS实现一个遮罩居中弹出层，并且随着浏览器窗口滚动条的滚动而动态调整位置。示例代码如下：
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>遮罩居中弹出层</title>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { background: url(about:blank); } /* 防止闪动在IE6，并优化请求 */
body { background: #fff; }
.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; z-index: 9999; }
.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 20px; z-index: 10000; display: none; }
.close { position: absolute; top: 5px; right: 5px; cursor: pointer; }
</style>
</head>
<body>
<div class="mask"></div>
<div class="popup">
<div class="close">X</div>
<p>这是一个弹出层的内容</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var mask = document.querySelector('.mask');
var popup = document.querySelector('.popup');
var close = popup.querySelector('.close');
function showPopup() {
mask.style.display = 'block';
popup.style.display = 'block';
}
function hidePopup() {
mask.style.display = 'none';
popup.style.display = 'none';
}
window.addEventListener('scroll', function() {
var top = window.innerHeight / 2 - popup.offsetHeight / 2 + window.pageYOffset;
var left = window.innerWidth / 2 - popup.offsetWidth / 2;
popup.style.top = top + 'px';
popup.style.left = left + 'px';
});
document.addEventListener('click', function(e) {
if (e.target === mask || e.target === close) {
hidePopup();
}
});
showPopup();
});
</script>
</body>
</html>
```
以上代码使用了fixed定位和transform来实现遮罩和弹出层居中显示，并且通过监听scroll事件来动态调整弹出层的位置，保证弹出层始终居中显示。点击遮罩或关闭按钮，可以关闭弹出层。这样就实现了一个随浏览器窗口滚动条滚动的遮罩居中弹出层。希望可以帮助大家更好地了解和使用JavaScript和CSS实现这一功能。
+,'(0)
"(()
="3)
"23)
)
)
"'9)
:"9)
剩余23页未读，继续阅读
2009-04-18 上传
2020-12-11 上传
2022-01-19 上传
2022-01-13 上传
2022-01-21 上传
2021-12-29 上传
2021-10-09 上传
2021-10-09 上传
惚如远行客
- 粉丝: 0
- 资源: 5209
我的内容管理
展开
最新资源
- R语言中workflows包的建模工作流程解析
- Vue统计工具项目配置与开发指南
- 基于Spearman相关性的协同过滤推荐引擎分析
- Git基础教程：掌握版本控制精髓
- RISCBoy: 探索开源便携游戏机的设计与实现
- iOS截图功能案例：TKImageView源码分析
- knowhow-shell: 基于脚本自动化作业的完整tty解释器
- 2011版Flash幻灯片管理系统：多格式图片支持
- Khuli-Hawa计划：城市空气质量与噪音水平记录
- D3-charts：轻松定制笛卡尔图表与动态更新功能
- 红酒品质数据集深度分析与应用
- BlueUtils: 经典蓝牙操作全流程封装库的介绍
- Typeout：简化文本到HTML的转换工具介绍与使用
- LeetCode动态规划面试题494解法精讲
- Android开发中RxJava与Retrofit的网络请求封装实践
- React-Webpack沙箱环境搭建与配置指南
