关于javascript:js实现自定义弹出对话框弹窗可拖拽

36次阅读

共计 2800 个字符，预计需要花费 7 分钟才能阅读完成。

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

本篇文章的代码，另外增加了 背景彩色遮罩 以及能够 任意拖拽对话框。

应用到的 js 知识点:onclick、onmousedown、onmouseup、onmousemove、鼠标地位

可任意拖拽：

细节:

上代码：

<!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>

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;}

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
  }
}

正文完