JS 6.5 面向对象（prototype）

k1076731326

已于 2024-06-05 09:53:20 修改

阅读量108

点赞数 3

文章标签： javascript 原型模式前端

于 2024-06-05 09:39:50 首次发布

本文链接：https://blog.csdn.net/k1076731326/article/details/139460694

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #login,
        #delete {
            width: 100px;
            height: 40px;
        }

        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 100px;
            border: 1px solid gray;
            background-color: white;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header {
            padding: 10px;
            background-color: #f2f2f2;
            border-bottom: 1px solid #ddd;
            position: relative;
        }

        .header i {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }

        .body {
            padding: 20px;
        }
    </style>
</head>

<body>
    <button id="login">login</button>
    <button id="delete">delete</button>

    <script>
        // 定义模态框构造函数
        function Modal(title = '', text = '') {
            // 创建模态框的外层 div 元素
            this.modalbox = document.createElement('div')
            this.modalbox.className = 'modal'
            // 设置模态框的内容，包括标题和文本
            this.modalbox.innerHTML = `
            <div class="header">${title}<i>x</i></div>
            <div class="body">${text}</div>
            `
        }

        // 定义打开模态框的方法
        Modal.prototype.open = function () {
            // 如果已经有一个模态框存在，则先移除它
            const box = document.querySelector('.modal')
            box && box.remove()
            // 将新的模态框添加到文档中
            document.body.appendChild(this.modalbox)
            // 添加点击 'x' 关闭模态框的事件监听器
            this.modalbox.querySelector('i').addEventListener('click', () => this.close())
        }

        // 定义关闭模态框的方法
        Modal.prototype.close = function () {
            document.body.removeChild(this.modalbox)
        }

        // 为删除按钮添加点击事件监听器
        document.querySelector('#delete').addEventListener('click', () => {
            // 创建一个新的模态框实例并打开它
            const del = new Modal("温馨提示", "您没有删除权限操作")
            del.open()
        })

        // 为登录按钮添加点击事件监听器
        document.querySelector('#login').addEventListener('click', () => {
            // 创建一个新的模态框实例并打开它
            const login = new Modal("友情提示", "您还没有登陆")
            login.open()
        })
    </script>
</body>

</html>