html5鼠标载入弹出信息框,js实现自定义弹出对话框（弹窗）可拖拽

在日常的开发中，我们经常需要点击一个按钮提供交互，弹出对话框，输入一些信息。

本篇文章的代码，另外添加了背景黑色遮罩以及可以任意拖拽对话框。使用到的js知识点:onclick、onmousedown、onmouseup、onmousemove、鼠标位置

效果图gif：

可任意拖拽：

细节:

上代码：

index.html

Document

关闭

输入账号：

输入密码：

var open = my$('open');

var box = my$('box');

var hidden = my$('hidden');

var close = my$('close');

open.onclick = function () {

box.style.display = 'flex';

hidden.style.display = 'block';

}

close.onclick = function () {

box.style.display = 'none';

hidden.style.display = 'none';

// 关闭后恢复box到原来的默认位置

box.style.top = '200px';

box.style.left = '';

}

box.onmousedown = function (e) {

e = e || window.event;

// 盒子的位置

var x = getPage(e).pageX - box.offsetLeft;

var y = getPage(e).pageY - box.offsetTop;

document.onmousemove = function (e) {

e = e || window.event;

box.style.left = getPage(e).pageX - x + 'px';

box.style.top = getPage(e).pageY - y + 'px';

}

}

document.onmouseup = function () {

document.onmousemove = null;

}

index.cssbody {

background-color: #324266;

}

#container {

display: flex;

justify-content: center;

}

/* 打开按钮 */

#open {

background-color: #52699e;

border: none;

height: 30px;

width: 200px;

border-radius: 10px;

color: #fff;

outline: none;

cursor: pointer;

}

#open:hover {

background-color: #4a5f8f;

}

/* 背景遮罩 */

#hidden {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background-color: #000000;

opacity: 0.3;

display: none;

}

/* 盒子 */

#box {

color: #fff;

width: 400px;

height: 200px;

background-color: #40527e;

display: none;

flex-direction: column;

border-radius: 10px;

align-items: center;

padding-top: 50px;

box-sizing: border-box;

position: absolute;

top: 200px;

cursor: move;

}

/* 关闭按钮 */

#close {

position: absolute;

top: 5px;

right: 5px;

font-weight: normal;

display: block;

width: 50px;

height: 25px;

line-height: 25px;

text-align: center;

border-radius: 20px;

color: #7a9ae4;

}

#close:hover {

background-color: #52699e;

cursor: pointer;

}

/* 输入框 */

#box input {

width: 200px;

height: 25px;

border-radius: 25px;

border: none;

outline: none;

padding-left: 20px;

background-color: #536a9e;

color: #fff;

}

/* 改变placeholder的值 */

#box input::-webkit-input-placeholder {

color: rgb(255, 255, 255);

opacity: 0.4;

}

#box input:first-child {

margin-bottom: 20px;

}

/* 登录按钮 */

#box #login {

cursor: pointer;

width: 300px;

height: 30px;

background-color: #02a0a0;

}

#box #login:hover {

background-color: #019191;

}

common.jsfunction my$(id) {

return document.getElementById(id);

}

// 获取鼠标在页面的位置，处理浏览器兼容性

function getPage(e) {

var pageX = e.pageX || e.clientX + getScroll().scrollLeft;

var pageY = e.pageY || e.clientY + getScroll().scrollTop;

return {

pageX: pageX,

pageY: pageY

}

}