模态框封装（弹窗）

今日上上签-

已于 2023-04-10 16:50:52 修改

阅读量461

点赞数

于 2023-04-10 15:56:48 首次发布

本文链接：https://blog.csdn.net/l19541216/article/details/130061493

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

目的：练习面向对象写插件（模态框）

1.多个模态框一样的，而且每次点击都会出来一个，怎么做呢？

构造函数。把模态框封装一个构造函数model，每次new都会产出一个模态框，所以点击不同的按钮就是在做new模态框，实例化。

2.模态框有什么功能？打开功能（显示），关闭功能，而且每个模态框都包含着两个功能

open功能
close功能

问：open和close方法写到哪里？

构造函数Model的原型对象上，共享方法

BUG：多次点击会显示很多模态框

解决：准备open显示的时候，先判断页面中有没有modal盒子，有就移除，没有就添加

话不多数，上代码。

最主要的就是JS部分，由于代码比较短，这里将JS放在HTML写

<!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>
    <link rel="stylesheet" href="../模态框封装css/模态框.css">
</head>

<body>
    <button id="delete">删除</button>
    <button id="login">登录</button>

    <!-- <div class="modal">
        <div class="header">温馨提示<i></i></div>
        <div class="body">您没有删除权限操作</div>
    </div> -->
    <script>
        //1.Modal 构造函数封装 -模态框
        function Modal(title = '', message = '') {
            // console.log(title,message);
            //创建Modal模态框盒子
            //1.1 创建div标签
            this.modalBox = document.createElement('div')
            //1.2 给div标签添加类名为modal
            this.modalBox.className = "modal"
            //1.3 model盒子内部填充两个div标签，并且修改文字内容
            this.modalBox.innerHTML = `
            <div class="close"><i>X</i></div>
            <div class="header">${title}</div>
            <div class="body">${message}</div>
             `
            console.log(this.modalBox);
        }
        // new Modal("温馨提示","你没有权限删除")
        // new Modal("友情提示","你还没有登录")
        //2.给构造函数原型对象挂载open方法
        Modal.prototype.open = function () {
            //先来判断页面中是否有modal盒子，如果有就先删除，否则继续添加
            const box=document.querySelector('.modal')
            box&&box.remove()
            //注意这个函数不要使用箭头函数，因为要用到this指向
            //把刚才创建的modalBox显示到页面body中
            document.body.append(this.modalBox)
            //要等着盒子显示出来，就可以绑定点击事件了，所以close一定要在open中写
            this.modalBox.querySelector('i').addEventListener('click',()=>{
                //这个地方用箭头函数，此处this指向上一级，也就是实例对象
                this.close();
            })
        }
        //3.给构造函数原型对象挂载close方法
        Modal.prototype.close = function () {
            this.modalBox.remove()

        }

        //测试一下 点击  删除按钮
        document.querySelector('#delete').addEventListener('click', () => {
            //先调用Modal构造函数
            const del = new Modal("温馨提示：", "您目前没有权限删除~");
            //实例对象调用open方法
            del.open()
        })
        //测试一下 点击  登录按钮
        document.querySelector('#login').addEventListener('click', () => {
            //先调用Modal构造函数
            const del = new Modal("友情提示：", "您还没有注册呢~");
            //实例对象调用open方法
            del.open()
        })
    </script>
</body>

</html>

Scss部分

.modal {
    margin: 0 auto;
    width: 300px;
    height: 180px;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    font-size: 22px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding: 20px 30px;
    box-shadow: 2px 2px 2px 3px rgb(212, 211, 211);
    .close{
        width: 100%;
        height:20px;
        i{
            display: block;
            width: 20px;
            height: 20px;
            float: right;
            cursor: pointer;
            color: rgb(108, 104, 104);
        }
    }
    .header {
        width: 100%;
        height: 30%;
        line-height: 60px;
       
    }
    .body {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

注意：这个小案例没有加遮罩，弹窗显示，还能点击页面中其他功能。不过点击归点击，页面始终最多显示一个弹窗。

也可以加个遮罩。open的时候，显示遮罩，close的时候，关闭遮罩，下面就是更改后的内容

<!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>
    <link rel="stylesheet" href="../模态框封装css/模态框.css">
</head>

<body>
    <div class="zhezhao"></div>
    <button id="delete">删除</button>
    <button id="login">登录</button>

    <!-- <div class="modal">
        <div class="header">温馨提示<i></i></div>
        <div class="body">您没有删除权限操作</div>
    </div> -->
    <script>
        //获取一下遮罩
        var zhezhao=document.querySelector(".zhezhao")
        //1.Modal 构造函数封装 -模态框
        function Modal(title = '', message = '') {
            // console.log(title,message);
            //创建Modal模态框盒子
            //1.1 创建div标签
            this.modalBox = document.createElement('div')
            //1.2 给div标签添加类名为modal
            this.modalBox.className = "modal"
            //1.3 model盒子内部填充两个div标签，并且修改文字内容
            this.modalBox.innerHTML = `
            <div class="close"><i>X</i></div>
            <div class="header">${title}</div>
            <div class="body">${message}</div>
             `
            console.log(this.modalBox);
        }
        // new Modal("温馨提示","你没有权限删除")
        // new Modal("友情提示","你还没有登录")
        //2.给构造函数原型对象挂载open方法
        Modal.prototype.open = function () {
            //先来判断页面中是否有modal盒子，如果有就先删除，否则继续添加
            const box=document.querySelector('.modal')
            box&&box.remove()
            //注意这个函数不要使用箭头函数，因为要用到this指向
            //把刚才创建的modalBox显示到页面body中
            document.body.append(this.modalBox)
            //要等着盒子显示出来，就可以绑定点击事件了，所以close一定要在open中写
            this.modalBox.querySelector('i').addEventListener('click',()=>{
                //这个地方用箭头函数，此处this指向上一级，也就是实例对象
                this.close();
            })
        }
        //3.给构造函数原型对象挂载close方法
        Modal.prototype.close = function () {
            this.modalBox.remove()
            zhezhao.style.display="none"
        }

        //测试一下 点击  删除按钮
        document.querySelector('#delete').addEventListener('click', () => {
            //先调用Modal构造函数
            const del = new Modal("温馨提示：", "您目前没有权限删除~");
            //实例对象调用open方法
            del.open()
            zhezhao.style.display="block"
        })
        //测试一下 点击  登录按钮
        document.querySelector('#login').addEventListener('click', () => {
            //先调用Modal构造函数
            const del = new Modal("友情提示：", "您还没有注册呢~");
            //实例对象调用open方法
            del.open()
            zhezhao.style.display="block"
        })
    </script>
</body>

</html>

.modal {
    margin: 0 auto;
    width: 300px;
    height: 180px;
    position: relative;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    font-size: 22px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding: 20px 30px;
    box-shadow: 2px 2px 2px rgb(212, 211, 211);
    z-index: 10000000;
    .close{
        width: 100%;
        height:20px;
        i{
            display: block;
            width: 20px;
            height: 20px;
            float: right;
            cursor: pointer;
            color: rgb(108, 104, 104);
        }
    }
    .header {
        width: 100%;
        height: 30%;
        line-height: 60px;
       
    }
    .body {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.zhezhao{
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    z-index: 999;
    background-color: rgb(38, 38, 38);
    opacity: 0.5;
}

至于效果可以手动复制粘贴试一下

今日上上签-

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
模态框封装（弹窗）

把模态框封装一个构造函数model，每次new都会产出一个模态框，所以点击不同的按钮就是在做new模态框，实例化。准备open显示的时候，先判断页面中有没有modal盒子，有就移除，没有就添加。2.模态框有什么功能？打开功能（显示），关闭功能，而且每个模态框都包含着。最主要的就是JS部分，由于代码比较短，这里将JS放在HTML写。1.多个模态框一样的，而且每次点击都会出来一个，怎么做呢？问：open和close方法写到哪里？至于效果可以手动复制粘贴试一下。多次点击会显示很多模态框。
复制链接

扫一扫