在日常的开发中，咱们常常须要点击一个按钮提供交互，弹出对话框，输出一些信息。
本篇文章的代码，另外增加了背景彩色遮罩以及能够任意拖拽对话框。
应用到的js知识点:onclick、onmousedown、onmouseup、onmousemove、鼠标地位
效果图gif：
可任意拖拽：
细节:
上代码：
index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <input type="button" id="open" value="点击按钮关上弹框"> <div id="container"> <!-- 背景彩色遮罩 --> <div id="hidden"></div> <div id="box"> <strong id="close">敞开</strong> <span>输出账号：<input type="text" placeholder="输出账号"></span> <span>输出明码：<input type="password" placeholder="输出明码"></span> <input type="button" value="登录" id="login"> </div> </div> <script src="common.js"></script> <script> 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; } </script> </body></html>index.css
body { 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.js
function 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 }}