19、js - 使用面向对象封装模态框

<!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>Document</title>
    <style>
        .wrap {
            border: 1px solid #ccc;
            background: darkseagreen;
            padding: 5px;
            width: 50%;
            box-shadow: 12px 12px #eee;
            margin: 0 auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .title {
            display: flex;
            justify-content: space-between;
        }

        .closeWrap {
            cursor: pointer;
        }
    </style>
</head>

<body>

    <button class="del">删除</button>
    <button class="login">登录</button>

</body>

</html>

<script>

    function Modal(title = '', content = '') {
        this.modalBox = document.createElement('div');
        this.modalBox.innerHTML = `<p class="title">
                                        <span>标题：${title}</span>
                                        <span class="closeWrap">x</span>
                                    </p>
                                    <p>${content}</p>`;
        this.modalBox.className = 'wrap';
    }

    Modal.prototype.open = function () {
        const wrap = document.querySelector('.wrap');
        wrap && wrap.remove();

        document.body.append(this.modalBox);

        document.querySelector('.closeWrap').addEventListener('click', () => {
            this.modalBox.remove();
        })
    }

    document.querySelector('.del').addEventListener('click', function () {
        const dell = new Modal("删除", "这是内容");
        dell.open();
    });

    document.querySelector('.login').addEventListener('click', function () {
        const loginn = new Modal("登录", "这是内容");
        loginn.open();
    });

</script>
19、js - 使用面向对象封装模态框

猜你喜欢
