JavaScript-自制网页内弹窗[可移动][DOM][纯HTML]
- 1. 实现思路
- 2.完整HTML文件代码
- 3.自制可移动弹窗运行效果(gif)
1. 实现思路
- 编写弹窗样式，display默认为none，position为absolute;
- 点击弹出窗口按钮，弹出的display会设置为block，即可显示弹窗；
- 编写弹窗的鼠标按下、抬起、移动、区域离开事件函数
- 在移动时候，获取当前鼠标x/y与上一个鼠标x/y的差值deltaX/deltaY,
然后计算新的距离父组件的左距离、上距离，
设定该窗口的ddDiv.style.left 、addDiv.style.top即可让弹窗跟随鼠标的移动； - 在点击弹窗内“确认”、“取消”按钮后，弹窗的display会设置为none，即可关闭弹窗。
2.完整HTML文件代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<style>
#root-div{
width: 1000px;
height: 1000px;
border: 2px solid black;
}
#add-div{
width: 600px;
height: 400px;
left: 200px;
top: 200px;
border: 1px solid rgb(111, 185, 204);
position:absolute;
display: none;
}
#title-div{
width: 100%;
height: 8%;
background-color: cornflowerblue;
color: white;
font-weight: bold;
font-size:1.4rem;
user-select: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#main-div{
width: 100%;
height: 84%;
}
#bottom-div{
width: 100%;
height: 8%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
#ok-btn{
margin-right: 10px;
margin-top: 2px;
margin-bottom: 5px;
width: 100px;
height: 30px;
color: white;
border: 0px;
border-radius: 15px;
background-color: rgb(91, 151, 241);
}
#ok-btn:active{
background-color: rgb(65, 119, 199);
}
#no-btn{
margin-right: 10px;
margin-top: 2px;
margin-bottom: 5px;
width: 100px;
height: 30px;
color: white;
border: 0px;
border-radius: 15px;
background-color: rgb(143, 142, 142);
}
#no-btn:active{
background-color: rgb(97, 97, 97);
}
#add-btn{
margin-right: 10px;
margin-top: 10px;
margin-left: 450px;
width: 60px;
height: 60px;
color: white;
border: 0px;
font-weight: bold;
font-size: 2rem;;
border-radius: 30px;
background-color: rgb(91, 151, 241);
}
#add-btn:active{
background-color: rgb(65, 119, 199);
}
</style>
<script>
var downX = 0;
var downY = 0;
var isDown = false;
function mouseDown(){
const titleDiv = document.getElementById('title-div');
titleDiv.innerHTML = '添加信息[准备...]';
let disX = window.event.clientX;
let disY = window.event.clientY;
this.downX = disX;
this.downY = disY;
this.isDown = true
}
function mouseUp(){
const titleDiv = document.getElementById('title-div');
titleDiv.innerHTML = '添加信息';
this.downX = 0;
this.downY = 0;
this.isDown = false;
}
function mouseLeave(){
mouseUp();
}
function mouseMove(){
const titleDiv = document.getElementById('title-div');
const rootDiv = document.getElementById('root-div');
const addDiv = document.getElementById('add-div');
if(isDown === true){
titleDiv.innerHTML = '添加信息[移动中...]'
let deltaX = window.event.clientX - this.downX;
let deltaY = window.event.clientY - this.downY;
this.downX = window.event.clientX;
this.downY = window.event.clientY;
let newOffsetLeft = addDiv.offsetLeft + deltaX;
let newOffsetTop = addDiv.offsetTop + deltaY;
let limitLeft = rootDiv.offsetWidth - addDiv.offsetWidth + 8;
let limitTop = rootDiv.offsetHeight - addDiv.offsetHeight + 8;
if(newOffsetLeft >= 8 && newOffsetLeft <= limitLeft){
if(newOffsetTop >= 8 && newOffsetTop <= limitTop){
addDiv.style.left = newOffsetLeft + 'px';
addDiv.style.top = newOffsetTop + 'px';
}
}
}
}
function clickAdd(){
const addDiv = document.getElementById('add-div');
addDiv.style.display = 'block';
}
function clickOk(){
const addDiv = document.getElementById('add-div');
addDiv.style.display = 'none';
}
function clickNo(){
const addDiv = document.getElementById('add-div');
addDiv.style.display = 'none';
}
</script>
</head>
<body>
<div id="root-div">
<div id="add-div">
<div id="title-div" onmousedown="mouseDown()" onmouseup="mouseUp()" onmousemove="mouseMove()" onmouseleave="mouseLeave()">添加信息</div>
<div id="main-div"></div>
<div id="bottom-div">
<button id="ok-btn" onclick="clickOk()">确认</button>
<button id="no-btn" onclick="clickNo()">取消</button>
</div>
</div>
<button id="add-btn" onclick="clickAdd()">+</button>
</div>
</body>
</html>
3.自制可移动弹窗运行效果(gif)
