JS面向对象小案例 模态框 

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="" />
    </head>
    <style>
        .item{
            color:red;
            background-color: antiquewhite;
            border:1px solid burlywood;
            width:100px;
            height:300px;
        }
    </style>
    <body>
        <button id="delete">删除</button>
        <button id="login">登录</button>
        <button id="add">新增</button>

       
    </body>

    <script>
        function Modal(title='',message=''){
            //创建div标签
            //1.3
            this.modalBox=document.createElement('div');
            this.modalBox.className='modal';
            this.modalBox.innerHTML=`
                <div class="header">${title}<i>x</i></div>
                <div class="body">${message}</div>
            `
           
            console.log(this.modalBox);
        }
    //   new Modal('温馨提示','您都没有权限操作');
       // new Modal('友情提示','您还没登录');
        Modal.prototype.open=function(){
            //判断页面是否有modal页面
            const box=document.querySelector('.modal')
            box && box.remove();
            document.body.append(this.modalBox);
            this.modalBox.querySelector('i').addEventListener('click',()=>{
                this.close();
                //这个需要用到箭头函数
            })
        };
        Modal.prototype.close=function(){
            this.modalBox.remove();
        };

        document.querySelector('#delete').addEventListener('click',()=>{
            const del=new Modal('温馨提示','您没有权限删除');
            del.open();
        });
        document.querySelector('#login').addEventListener('click',()=>{
            const login=new Modal('友情提示','你没有注册呢');
            login.open();

        });
        document.querySelector('#add').addEventListener('click',()=>{
            const add=new Modal('友情提示','你没有新增权限');
            add.open();

        });
       
    </script>
</html>

 

posted @ 2023-09-02 22:43  斯斯20222  阅读(21)  评论(0)    收藏  举报