模态框案例

模态框

---

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

网易云音乐如图：

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

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>

优化后的代码就可以解决这个问题啦！！

总结：代码中还体现了两个小功能 -倒计时和关闭 不知道大家有没有发现。

提示：素材和演示视频：公众号搜索 [前端小邓] -> 回复[模态框] 即可