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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在网站中加入网页助手小精灵，当用户访问网站时，向用户问好，或是传递一些网站的重要信息，给用户带来极好的体验感，那么基于js代码是如何调用网页助手小精灵的呢？下面跟着脚本之家小编一起学习吧2016-06-06
这篇文章主要介绍了JS实现的仿淘宝交易倒计时效果,涉及JavaScript针对时间与日期的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要为大家详细介绍了js异步上传多张图片插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
下面小编就为大家带来一篇Javascript实现跑马灯效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
import.meta 是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象，它包含了这个模块的信息，这篇文章主要介绍了巧用 import.meta 实现热更新的问题,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了ES6实现图片切换特效代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
实现GridView，表头固定，表体有滚动条且可滚动，下面有个不错的示例，希望对大家有所帮助2014-02-02
当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改2013-10-10
导致这个问题产生的原因，一般是因为js（一个比较复杂的js）写在body里面，在body元素加载完之前调用出现问题。显然，解决该问题的方法就是将这一段js放在body元素解析完毕之后。2010-11-11
这篇文章主要介绍了小程序登录态管理的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论