XM的小窝


 

【JavaScript】写了个模态框(弹出框)

效果

模态框

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <style>
        * {
            outline: none;
        }

        body,
        html {
            height: 100%;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .login-header {
            font-size: 20px;
            text-align: center;
        }

        .login {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
            background-color: #fff;
            /* 让一个盒子在页面居中的方法 */
            /* 设置盒子为固定定位 */
            /* 让盒子 translate往页面外移动自身的一半位置 */
            /* 再用定位来移动页面的百分之五十就行了 */
            transform: translate(-50%, -50%) scale(0);
            transition: transform .5s;
            left: 50%;
            top: 50%;
            width: 700px;
            height: 300px;
            box-shadow: 1px 1px 12px #ddd;
        }

        .login-bg {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(3, 3, 3, .25);
        }

        .login-title {
            text-align: center;
            font-size: 20px;
            padding: 20px 0;
        }

        .login-title .close-login {
            position: absolute;
            right: -25px;
            top: -25px;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background-color: #fff;
            line-height: 40px;
            font-size: 14px;
            box-shadow: 1px 1px 10px #eee;
        }

        .login-input-content {
            text-align: right;
            padding-right: 80px;
        }

        .login-input-content .login-input:nth-child(2) {
            margin-top: 20px;
        }

        .login-input-content .login-input label {
            text-align: right;
        }

        .username,
        .password {
            width: 500px;
            height: 40px;
            border: 1px solid #eee;
        }

        .sumbit {
            position: fixed;
            display: inline-block;
            width: 300px;
            height: 50px;
            margin-top: 30px;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid #eee;
            background-color: #fff;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="login-header">
        <a href="javascript:;" id="link">点我</a>
    </div>
    <div id="login" class="login">
        <div id="title" class="login-title">登了个录
            <span><a href="javascript:;" class="close-login" id="closeBtn">关</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名:</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="username">
            </div>
            <div class="login-input">
                <label>密码:</label>
                <input type="password" class="password" id="password" placeholder="请输入登录密码">
            </div>
            <div id="loginBtn" class="login-button">
                <a href="javascript:void(0);" id="login-button-submit" class="sumbit">登录</a>
            </div>
        </div>
    </div>
    <!-- 遮盖层 -->
    <div class="login-bg" id="bg"></div>
    <script>
        var openBox = document.querySelector("#link");
        var loginBox = document.querySelector(".login");
        var closeBtn = document.querySelector("#closeBtn");
        var bg = document.querySelector("#bg");
        var title = document.querySelector("#title");
        var username = document.querySelector("#username");
        var password = document.querySelector("#password");
        openBox.addEventListener("click", function() {

            //显示登录弹框
            loginBox.style.display = "block";

            //延迟显示
            setTimeout(() => {

                //显示遮罩
                bg.style.display = "block";

                //弹出动画
                loginBox.style.transform = "translate(-50%, -50%)" + "scale(1)";
            }, 50)

        });

        //给背景和关闭按钮绑定上关闭侦听器
        closeBtn.addEventListener("click", CloseBtn);
        bg.addEventListener("click", CloseBtn);

        function CloseBtn() {

            //清除输入框内容(安全)
            username.value = "";
            password.value = "";

            //延迟隐藏
            setTimeout(() => {

                //隐藏遮罩
                bg.style.display = "none";

                //关闭动画
                loginBox.style.transform = "translate(-50%, -50%)" + "scale(0)";
            }, 50);

            //隐藏登录弹框(延迟,快速中断动画)
            setTimeout(() => {
                loginBox.style.display = "none";
            }, 100);

            //清空样式,以便下次打开
            setTimeout(() => {
                loginBox.style = "";
            }, 101);
        }

        //当鼠标经过标题栏时
        title.addEventListener("mouseover", function() {
            this.style.cursor = "move";
        });

        //当鼠标按下时
        title.addEventListener("mousedown", function(e) {

            //获取鼠标相对于页面的位置
            e.pageX;
            e.pageY;

            //防止选中标题文本
            this.style.userSelect = "none";

            //获取鼠标相对于标题盒子的位置 由于使用了translate定位法,盒子获取到的零坐标移到了中间,所以需要减去一半的盒子长度
            var boxX = e.pageX - (loginBox.offsetLeft - loginBox.offsetWidth / 2);
            var boxY = e.pageY - (loginBox.offsetTop - loginBox.offsetHeight / 2);

            //主移动方法
            function move(e) {
                //限制移动区域,防止移动到窗口外
                if (e.pageX >= 0 && e.pageY >= 0 && window.innerWidth >= e.pageX && window.innerHeight >= e.pageY) {

                    //由于使用了translate定位法,盒子获取到的零坐标移到了中间,所以需要加上一半的盒子长度
                    loginBox.style.left = (e.pageX + (loginBox.offsetWidth / 2) - boxX) + "px";
                    loginBox.style.top = (e.pageY + (loginBox.offsetHeight / 2) - boxY) + "px";
                }
                console.log(e.pageX, e.pageY, boxX, boxY);
            }

            //当鼠标移动时
            document.addEventListener("mousemove", move);

            //当鼠标松开时取消移动
            document.addEventListener("mouseup", () => {
                document.removeEventListener("mousemove", move);
            });

        });
    </script>
</body>

</html>
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注