模态框案例

article/2025/8/19 0:47:54

模态框

模态框在很多网站是很常见的，比如网易云音乐登录，百度登录等网站。

网易云音乐如图：

让我们来看看代码吧！！注意：这里为了更好的演示效果，增加了遮挡层。

HTML部分：

<!-- 外盒子 -->
<div class="box"><!-- 视频 --><video src="index-video.mp4" loop autoplay preload muted></video><!-- 倒计时 --><p>倒计时5秒</p><!-- 遮挡测 --><div class="mask">可拖拽区域</div>
</div>

CSS部分：

* {padding: 0;margin: 0;user-select: none;
}.box {position: relative;width: 712px;height: 400px;
}video {position: absolute;top: 0;left: 0;outline: 0;width: 100%;height: 100%;
}.mask {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;font-size: 35px;text-align: center;line-height: 400px;color: rgba(255, 255, 255, .8);background: rgba(255, 255, 255, 0.3);cursor: move;
}p {position: absolute;top: 10px;right: 10px;display: block;padding: 0 5px;text-align: center;line-height: 25px;font-size: 12px;color: #d3d3d3;background: rgba(0, 0, 0, .5);z-index: 3;
}

备注：结构和基本的样式就不多解释了，因为实在太基础了，主要来看看JS代码

JavaScript部分：

<script>// 逻辑:// -主要的鼠标事件:onmoudown鼠标按下,onmousemove鼠标移动,onmouseup鼠标松开。// -过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，最后模态框就可以跟着鼠标走了。// 1.鼠标的坐标 - 鼠标在盒子中的坐标 = 模态框的位置// [1]获取元素var video = document.querySelector('video');var text = document.querySelector('p');var box = document.querySelector('.box');var mask = document.querySelector('.mask');// 定时器变量var time = 5;var timer;// [2]倒计时效果timer = setInterval(function () {if (time == 0) {clearInterval(timer)time = 5;text.innerHTML = "关闭广告"text.style.cursor = "pointer"text.onclick = function () {text.style.display = "none"video.style.display = "none"}} else {text.innerHTML = '倒计时' + time + '秒';time--;}}, 1000);// 鼠标移到盒子 让遮挡层显示box.addEventListener('mouseover', function () {mask.style.display = 'block';})// 鼠标移出盒子 让遮挡层隐藏box.addEventListener('mouseout', function () {mask.style.display = 'none';})//[3]移动 效果// 初始化坐标var X = 0;var Y = 0;// 鼠标按下事件mask.addEventListener('mousedown', function (e) {// 获取光标位置X = e.clientX - box.offsetLeft;Y = e.clientY - box.offsetTop;mask.style.background = 'rgba(225,225,225,.5)';mask.innerHTML = '已识别操作';// 鼠标移动document.addEventListener('mousemove', move)function move(e) {// 鼠标在盒子的坐标var left = e.clientX - X;var top = e.clientY - Y;// 赋值box.style.left = left + 'px';box.style.top = top + 'px';}// 鼠标放开document.addEventListener('mouseup', function () {// 移除事件document.removeEventListener('mousemove', move)mask.style.background = 'rgba(225,225,225,.3)';mask.innerHTML = '可拖拽区域';})})
</script>

完成的效果：

当我们鼠标移入的时候会提示"可拖拽区域"

当我们鼠标按下的时候会提示"已识别操作"

那么问题来了，模态框在移动的时候会移出我们的视线

如图：

这会给人一种不好的体验感，那当然解决的方法也是有的，让我们来优化下我们的代码吧！！！

优化的代码：

<script>// 逻辑:// -主要的鼠标事件:onmoudown鼠标按下,onmousemove鼠标移动,onmouseup鼠标松开。// -过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，最后模态框就可以跟着鼠标走了。// 1.鼠标的坐标 - 鼠标在盒子中的坐标 = 模态框的位置// [1]// 获取元素var video = document.querySelector('video');var text = document.querySelector('p');var box = document.querySelector('.box');var mask = document.querySelector('.mask');// 定时器变量var time = 5;var timer;// [2]// 倒计时效果timer = setInterval(function () {if (time == 0) {clearInterval(timer)time = 5;text.innerHTML = "关闭广告"text.style.cursor = "pointer"text.onclick = function () {text.style.display = "none"video.style.display = "none"}} else {text.innerHTML = '倒计时' + time + '秒';time--;}}, 1000);// 鼠标移到盒子 让遮挡层显示box.addEventListener('mouseover', function () {mask.style.display = 'block';})// 鼠标移出盒子 让遮挡层隐藏box.addEventListener('mouseout', function () {mask.style.display = 'none';})// 初始化坐标var X = 0;var Y = 0;// 鼠标按下事件mask.addEventListener('mousedown', function (e) {// 获取光标位置X = e.clientX - box.offsetLeft;Y = e.clientY - box.offsetTop;mask.style.background = 'rgba(225,225,225,.5)';mask.innerHTML = '已识别操作';// 鼠标移动document.addEventListener('mousemove', move)function move(e) {// 鼠标在盒子的坐标var left = e.clientX - X;var top = e.clientY - Y;// 算出left和top最大值var LeftMax = document.documentElement.clientWidth - box.offsetWidth;var TopMax = document.documentElement.clientHeight - box.offsetHeight;// 当Left坐标小于0的时候，就停在0的坐标上if (left < 0) {left = 0;// 当Left坐标大于最大距离的时候，就停在最大距离的的坐标上} else if (left > LeftMax) {left = LeftMax;}// 当Top坐标小于0的时候，就停在0的坐标上if (top < 0) {top = 0;// 当Top坐标大于最大距离的时候，就停在最大距离的的坐标上} else if (top > TopMax) {top = TopMax;}// 赋值box.style.left = left + 'px';box.style.top = top + 'px';
}// 鼠标放开document.addEventListener('mouseup', function () {document.removeEventListener('mousemove', move)mask.style.background = 'rgba(225,225,225,.3)';mask.innerHTML = '可拖拽区域';})})
</script>