网页弹窗（练习）

Asunny5

已于 2022-12-30 00:23:03 修改

阅读量137

点赞数

文章标签： css html javascript

于 2022-12-28 17:48:51 首次发布

本文链接：https://blog.csdn.net/m0_60979337/article/details/128472024

版权

解题思路：

JS中控制标签的display

<!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>
        /* height:100%是铺满父容器的高度。 height:100vh是指铺满屏幕的高度。 */
        .mask{
           display: none;
            justify-content: center;
            align-items: center;
            position: fixed;
            left:0;
            top: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(0,0,0,0.3);
        }
        .mask>div{
            width: 300px;
            background-color: #fff;
            padding: 15px;
            
        }
        .mask>div .content{
            min-height: 100px;
        }

    </style>
</head>
<body>
    <button class="btn">弹窗</button>
        <div class="mask">
            <div>
                <div>提示</div>
                <div class="content"></div>
                <button class="close">关闭</button>
            </div>
        </div>
    <script >
        var btn = document.querySelector(".btn");
        var modal = document.querySelector(".mask");
        //点击弹窗按钮时，1.跳出MASK 2.跳出提示文字
        btn.onclick=function(){
            modal.style.display ="flex";
            modal.querySelector(".content").innerText = "你好,有什么问题?"
        }
        //点击关闭按钮时 MASK 变为none
        modal.querySelector(".close").onclick = function(){
            modal.style.display = "none";
        }
    </script>
</body>
</html>

DOM封装

css

.mask {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
}

.mask>div {
    width: 300px;
    background-color: #fff;
    padding: 15px;
}

.mask #content {
    min-height: 100px;
}

.mask #btn {
    display: flex;
    justify-content: space-between;
}

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="./utlis.css">
</head>

<body>
    <button class="btn1">弹窗1</button>
    <button class="btn2">弹窗2</button>
    <script src="./utils.js"></script>
    <script>
        //第一个弹窗
        var btn = document.querySelector(".btn1");
        var modal = new Modal();
        //给btns 添加点击事件
        btn.onclick = function () {
            //调用Modal.init 方法
            modal.init({
                cancel: function () {
                    console.log("你点击了弹窗1取消");
                },
                ok: function () {
                    console.log("你点击了弹窗1确认");
                }
            })
            modal.show("提示", "你点击了按钮1");
        }
        //第二个弹窗
        var btn = document.querySelector(".btn2");
        btn.onclick = function () {
            modal.init({
                cancel: function () {
                    console.log("你点击了弹窗2取消")
                },
                ok: function () {
                    console.log("你点击了弹窗1确认");
                }
            })
            modal.show("提示", "你点击了按钮2");

        }
    </script>
</body>

</html>

//封装一个函数 modal 
function Modal() {
    //4.需要在原型上添加一个hasIns 判断构造函数是否创造了实例
    if (!Modal.prototype.hasIns) {
        //如果hasins为false 则代表还没有创造实例，所以需要调用create函数
        Modal.prototype.hasIns = true;
        this.create();
    }
}
/**
 * 
 * @param {*} option  cancel是 点击取消 执行的回调函数，ok是 点击确认 执行的回调函数
 * {cancel:callback,ok:callback} 
 */
//5.在Modal原型上创造一个 回调函数的方法 init
Modal.prototype.init = function (option) {
    this.cancel = option.cancel;
    this.confirm = option.ok;
}
//1. 创造一个create构造函数 创建标签
Modal.prototype.create = function () {
    //mask 标签
    var div = document.createElement("div");
    div.className = "mask";
    //提示框 标签
    var divcon = document.createElement("div");
    //提示框标签里面的 三个内容标签
    var str = "<div id='title'>提示</div> <div id='content'></div> <div id = 'btn'><button class = 'cancel'>取消</button><button class = 'confirm'>确认</button></div> "
    //返回标签中的所有内容
    divcon.innerHTML = str;
    //把divcon 标签添加到div 标签中
    div.appendChild(divcon);
    //把div 标签添加到body中
    document.body.appendChild(div)
    //3.点击取消按钮 / 确认按钮 的方法 
    //这里的this指向的是按钮对象，要想让他指向close内部对象 需要用bind
    document.querySelectorAll("#btn>button")[0].onclick = this.close.bind(this);
    document.querySelectorAll("#btn>button")[1].onclick = this.confirm.bind(this);

}
//2.封装三个按钮的方法
//显示弹窗的方法 show
Modal.prototype.show = function (title, content) {
    //innerText 获取元素的文本内容
    document.querySelector("#title").innerText = title;
    document.querySelector("#content").innerText = content;
    //mask 显示
    document.querySelector(".mask").style.display = "flex";

}
//关闭弹窗的方法 close 
Modal.prototype.close = function () {
    //如果传入了cancel函数 则执行cancel函数
    if (typeof this.cancel === "function") {
        this.cancel();
    }
    document.querySelector("#title").innerText = " ";
    document.querySelector("#content").innerText = " ";
    //mask 不显示
    document.querySelector(".mask").style.display = "none";
}
//确认弹窗的方法 ok
Modal.prototype.confirm = function () {
    //如果传入了confirm函数 则执行ok函数
    if (typeof this.ok === "function") {
        this.ok();
    }
    document.querySelector("#title").innerText = " ";
    document.querySelector("#content").innerText = " ";
    //mask 不显示
    document.querySelector(".mask").style.display = "none";
}