JavaScript+CSS实现模态框效果
更新时间：2022年07月04日 09:59:26 作者：weixin_44607194
这篇文章主要为大家详细介绍了JavaScript+CSS实现模态框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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 instanceof,typeof的区别
区分string 与 String的区别2010-03-03
这篇文章主要介绍了JavaScript常见鼠标事件与用法,结合实例形式较为详细的分析了javascript 8种常见的鼠标事件与相关使用技巧,需要的朋友可以参考下2019-01-01
这篇文章主要为大家详细介绍了javascript实现tab切换的四种方法，并且对每个方法进行了评价，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了js函数内变量的作用域分析,以实例形式简单分析了js函数的变量调用顺序,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
下面小编就为大家带来一篇关于js动态引入四种方式的实例代码，具有很好的参考价值，分享给大家一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了js中如何往对象中添加属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Highlightjs是一款优秀的代码高亮Js组件，可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码，需要的朋友参考下吧2017-09-09
这篇文章主要为大家详细介绍了微信小程序实现性别单选效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
javascript 字符串的连接效率问题，需要的朋友可以参考下。2009-12-12
这篇文章主要为大家详细介绍了微信小程序实现带滑块的进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
最新评论