本文实例为大家分享了JavaScript+CSS实现模态框效果的具体代码，供大家参考，具体内容如下
发现的问题
1）鼠标按下后拖动的瞬间，光标会脱离模态盒子跑到外面
2）鼠标弹起事件不起作用
解决的思路
首先是因为代码里有用到offsetLeft和offsetTop这两个属性，所以考虑是不是 模态框的定位 出现了问题 。
又：设置关闭标签设置了绝对定位，那么loginBox作为其父级元素我将其设置为 相对定位 。
各个类型定位的介绍：
1.静态定位: position: static 默认,也就是文档流定位,元素的显示位置与源码顺序一致（不是定位元素）
2.相对定位: position: relative;相对于该元素在文档流中的原始位置进行偏移
3.绝对定位: position: absolue;相对于它的祖先中离它最近的]定位元素]的位置发生偏移（如果祖先元素中不存在定位元素,它就参考根元素(html)进行定位）
4.固定定位: position: fixed; 是绝对定位的一个特例,它始终相对于html定位
定位元素：只要这个元素中有position: relative;或者 position:absolute;就称为定位元素
由上可看出，相对定位，指的是相对于该元素在文档流中的原始位置进行偏移而不是相对于html，所以 loginBox不能设置为相对定位 。可以用绝对定位或固定定位，两者均可。
另外，需要注意使用top、left定位后，则margin-top、margin-left产生同方向相加的位移效果，margin-bottom、margin-righ产生无任何效果的margin空间。所以保留margin: 100px auto;时效果还是会有些奇怪，注释起来了就好了。
代码
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ??
? ? ? ? body {
? ? ? ? ? ? background-color: white;
? ? ? ? }
? ? ? ??
? ? ? ? .dianji {
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? margin: 10px auto;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ??
? ? ? ? .loginBox {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? ? ? /* margin: 100px auto; */
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? width: 370px;
? ? ? ? ? ? background-color: white;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? display: none;
? ? ? ? }
? ? ? ??
? ? ? ? .loginBox>span {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: -15px;
? ? ? ? ? ? right: -15px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? font-size: 8px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? background-color: white;
? ? ? ? ? ? border: 1px solid #cccccc;
? ? ? ? }
? ? ? ??
? ? ? ? .loginBox h5 {
? ? ? ? ? ? /* position: relative; */
? ? ? ? ? ? margin-bottom: 18px;
? ? ? ? ? ? font-weight: normal;
? ? ? ? ? ? font-size: 16px;
? ? ? ? ? ? cursor: move;
? ? ? ? }
? ? ? ??
? ? ? ? .uname {
? ? ? ? ? ? margin: 18px 0 15px 15px;
? ? ? ? ? ? height: 25px;
? ? ? ? ? ? line-height: 25px;
? ? ? ? }
? ? ? ??
? ? ? ? .uname span,
? ? ? ? .psw span {
? ? ? ? ? ? font-size: 12px;
? ? ? ? }
? ? ? ??
? ? ? ? .uname input,
? ? ? ? .psw input {
? ? ? ? ? ? height: 25px;
? ? ? ? ? ? width: 230px;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? outline: none;
? ? ? ? }
? ? ? ??
? ? ? ? .loginBox button {
? ? ? ? ? ? margin: 20px;
? ? ? ? ? ? width: 190px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? border: 1px solid #cccccc;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="dianji">点击，弹出登录框</div>
? ? <div class="loginBox">
? ? ? ? <span class="close">关闭</span>
? ? ? ? <h5>登录会员</h5>
? ? ? ? <div class="uname"><span>用户名：</span> <input type="text" placeholder="请输入用户名"></div>
? ? ? ? <div class="psw"><span>登录密码：</span> <input type="password" placeholder="请输入密码"></div>
? ? ? ? <button>登录</button>
? ? </div>
? ? <script>
? ? ? ? var dianji = document.querySelector('.dianji');
? ? ? ? var loginBox = document.querySelector('.loginBox');
? ? ? ? var close = document.querySelector('.close');
? ? ? ? var bodyy = document.body;
? ? ? ? var move_area = document.querySelector('h5');
? ? ? ? dianji.addEventListener('click', function() {
? ? ? ? ? ? bodyy.style.backgroundColor = '#ccc';
? ? ? ? ? ? loginBox.style.display = 'block';
? ? ? ? })
? ? ? ? close.addEventListener('click', function() {
? ? ? ? ? ? bodyy.style.backgroundColor = 'white';
? ? ? ? ? ? loginBox.style.display = 'none';
? ? ? ? })
? ? ? ? move_area.addEventListener('mousedown', function(e) {
? ? ? ? ? ? var x = e.pageX - loginBox.offsetLeft;
? ? ? ? ? ? var y = e.pageY - loginBox.offsetTop;
? ? ? ? ? ? console.log('x=' + x + ' ?y=' + y);
? ? ? ? ? ? document.addEventListener('mousemove', move)
? ? ? ? ? ? function move(e) {
? ? ? ? ? ? ? ? loginBox.style.left = e.pageX - x + 'px';
? ? ? ? ? ? ? ? loginBox.style.top = e.pageY - y + 'px';
? ? ? ? ? ? }
? ? ? ? ? ? //鼠标弹起，就是让鼠标移动时间解除
? ? ? ? ? ? document.addEventListener('mouseup', function() {
? ? ? ? ? ? ? ? document.removeEventListener('mousemove', move);
? ? ? ? ? ? })
? ? ? ? })
? ? </script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
查看更多关于JavaScript+CSS实现模态框效果的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did124453