<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pop {
display: block;
margin: 0 auto;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
display: none;
position: absolute;
left: 300px;
top: 200px;
z-index: 999;
}
h2 {
text-align: center;
}
.del {
background-color: red;
width: 40px;
height: 40px;
position: absolute;
border-radius: 50%;
right: -20px;
top: -20px;
border: none;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(43, 42, 42, 0.1);
display: none;
}
</style>
</head>
<body>
<button class="pop">弹出模态框</button>
<div class="box">
<h2>标题</h2>
<button class="del">删除</button>
</div>
<div class="mask"></div>
<script>
var pop = document.querySelector('.pop')
var box = document.querySelector('.box')
var del = document.querySelector('.del')
var mask = document.querySelector('.mask')
var title = document.querySelector('h2')
// 1.点击弹出层,会弹出模态框, 并且显示灰色半透明的遮挡层。
pop.onclick = function () {
box.style.display = 'block';
mask.style.display = 'block';
// console.log(1);
}
// 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。
del.onclick = function () {
box.style.display = 'none';
mask.style.display = 'none';
// console.log(del);
}
// 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。
title.onmousedown = function (e) {
var x = e.pageX - box.offsetLeft;
var y = e.pageY - box.offsetTop;
document.onmousemove = function (e) {
var boxLeft = e.pageX - x;
var boxTop = e.pageY - y;
box.style.left = boxLeft + 'px'
box.style.top = boxTop + 'px'
}
// 4.鼠标松开,可以停止拖动模态框移动
document.onmouseup = function () {
document.onmousemove = null;
console.log(12);
}
}
</script>
</body>
</html>
Web API---模态框拖拽
最新推荐文章于 2024-04-03 00:50:31 发布