造轮子之确认框

最新推荐文章于 2023-03-09 17:01:16 发布

岛泪

最新推荐文章于 2023-03-09 17:01:16 发布

阅读量429

点赞数

分类专栏：教程实战文章标签： HTML CSS javascript 模态框确认框

本文链接：https://blog.csdn.net/weixin_44161401/article/details/103500080

版权

实战同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

教程

13 篇文章 0 订阅

订阅专栏

确认框是模态框的一种具体用途，非常常见也非常实用。

第一种是没有遮罩层的确认框

第二种是有遮罩层的确认框（并隐藏掉右边滚动条）

第二种确认框源码下载地址

https://gitee.com/island_tears/confirmation_box

使用说明

引入 confirm.js 和 confirm.css 文件。
使用前先实例化 confirm 对象。
在需要弹出确认框的时候，执行 confirm 实例的 show() 方法。
show() 方法的参数为一个对象，该对象有两个属性，message 属性为确认框的提示信息，yes 属性为点击确认框确认按钮后执行的回调函数。

第一种实现的思路

1、把 confirm 的 position 属性设置成 fixed，让 confirm 基于窗口定位。

2、用 transform 属性使 confirm 在窗口内水平垂直居中。

3、通过 dispaly 属性控制 confirm 的显示和隐藏。

第二种实现的思路

1、confirm 有一个父元素 confirm-container ，设置 confirm-container 的 position 属性为 fixed，让 confirm-container 基于窗口定位。

2、confirm-container 设置成 flex 元素，并设置 widht : 100%、height : 100%、 justify-content : center 和 align-items : center ，这样 confirm 就基于窗口水平垂直居中。

3、confirm-container 通过 background-color: rgba(0,0,0,0.3); 可以设置透明的背景颜色。

4、确认框弹出的时候，判断有没有窗口滚动条，如果有则隐藏窗口滚动条，并向 body 添加一个大小为滚动条宽度的 margin-right ，这样网页元素不会向右移，使网页更加美观。

5、通过 dispaly 属性控制 confirm-container 的显示和隐藏。

我写代码的时候都是秉承着最大复用性原则，所以我写的代码大部分都是面向对象风格，因为是面向对象风格，所以就用ES6语法，因为用了ES6语法，所以不兼容IE浏览器。

如果确认框被其他元素遮住了，添加上 z-index 属性并增大该属性数值就可以了。

第一种代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            height: 2000px;
        }

        #confirm{
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            width: 500px;
            background: #EEEEEE;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -o-transform: translateX(-50%) translateY(-50%);
        }

        #confirm-header{
            height: 30px;
            position: relative;
        }

        #confirm-close{
            height: 30px;
            display: inline-block;
            width: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 30px;
            position: absolute;
            right:0;
            top:0;
        }

        #confirm-close:hover{
            background-color: #666666;
            color: white;
        }

        #confirm-main{
            padding: 25px 10px;
            text-align: center;
        }
        #confirm-footer{
            height: 70px;
            text-align: center;
        }

        #confirm-yes,#confirm-no{
            border: none;
            height: 40px;
            width: 70px;
            margin: 0 50px;
            border-radius: 5px;
            font-size: 18px;
        }
        #confirm-yes{
            background-color: 	#FF6666;
            color: white;
        }

        #confirm-yes:hover{
            background-color: red;
        }

        #confirm-no:hover{
            background-color: blue;
        }

        #confirm-yes:focus,#confirm-yes:active{
            outline: none;
            box-shadow:0 0 2px 4px #FF99FF;
        }

        #confirm-no{
            background-color:#0069D9;
            color: white;
        }

        #confirm-no:focus,#confirm-no:active{
            outline: none;
            box-shadow:0 0 2px 4px #77AADD;
        }




    </style>
</head>
<body>
    <button id="test">点击</button>
</body>
<script>


    window.onload = function(){
        let confirm =  new Confirm();//实例化 Confirm 对象。
        document.getElementById("test").onclick = function () {
            //在点击事件方法里执行 Confirm 对象的 show 方法。
            confirm.show({
                message:"确认删除吗？", //设置提示信息
                yes:function () {     //设置用户点击确认后执行的函数
                    alert("删除成功");
                },
            })
        };
    };


    class Confirm {

        constructor(){
            //Confirm 对象的构造方法，在实例化对象时调用。
            //利用 insertAdjacentHTML 方法在 body 标签内部末尾添加确认框的 html 代码。
            document.getElementsByTagName("body")[0].insertAdjacentHTML("beforeend","<div id=\"confirm\">" +
                "            <div id=\"confirm-header\"><span id=\"confirm-close\">×</span></div>" +
                "            <p id=\"confirm-main\"></p>" +
                "            <div id=\"confirm-footer\">" +
                "                <button id=\"confirm-yes\">确认</button>" +
                "                <button id=\"confirm-no\">取消</button>" +
                "            </div>" +
                "        </div>");
            //对象属性赋值。把 DOM 对象存进对象属性，避免多次操作 DOM，从而提高 Web 性能。
            //为什么都用ID做标识符？
            //1、一个网页里大概率只需要一个确认框，所以确认框在一个网页里是唯一的，因为是唯一的，所以用 ID 作标识符。
            //2、ID 选择器比任何选择器都要快，所以在可以用 ID 选择器的情况下尽量用 ID 选择器，因为要使用 ID 选择器，所以用 ID 做标识符
            this.confirm = document.getElementById("confirm");
            this.confirmMain = document.getElementById("confirm-main");
            this.confirmYes  = document.getElementById("confirm-yes");
            this.confirmNo = document.getElementById("confirm-no");
            this.confirmClose = document.getElementById("confirm-close");

        }

        show(obj){

            //show 方法，接受一个对象作为参数，该对象的 message 属性是提示信息，yes 属性是用户点击确认后执行的函数。
            //该方法作用是控制确认框的显示和隐藏。

            if(typeof obj !== "object"){
                throw new TypeError("errorMessage");
            }

            if(typeof obj.message !== "string" && typeof obj.message !== "number"){
                throw new TypeError("errorMessage");
            }

            if(typeof obj.yes !== "function"){
                throw new TypeError("errorMessage");
            }



            this.confirmMain.innerHTML = obj.message; //设置确认框的提示信息。
            const that = this; //保存指针。
            this.confirmYes.onclick = function (){
                //绑定点击事件。
                //点确认后把确认框隐藏，并执行回调函数。
                that.confirm.style.display = "none";
                obj.yes();
            };

            this.confirmNo.onclick = function () {
                //绑定点击事件。
                //点取消后把确认框隐藏。
                that.confirm.style.display = "none";
            };
            this.confirmClose.onclick = function () {
                //绑定点击事件。
                //点击关闭后把确认框隐藏。
                that.confirm.style.display = "none";
            };

            //显示确认框。
            this.confirm.style.display = "block";

        }
    }
</script>
</html>

第二种源码

css文件

#confirm-container{
    position: fixed;
    left:0;
    top:0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5); /* 最后的数字越少背景越透明 */
    display: none;
    justify-content: center;
    align-items: center;
}

#confirm{
    width: 500px;
    background-color: white;
}

#confirm-header{
    height: 30px;
    position: relative;
}

#confirm-close{
    height: 30px;
    display: inline-block;
    width: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 30px;
    position: absolute;
    right:0;
    top:0;
}

#confirm-close:hover{
    background-color: #666666;
    color: white;
}

#confirm-main{
    padding: 25px 10px;
    text-align: center;
}
#confirm-footer{
    height: 70px;
    text-align: center;
}

#confirm-yes,#confirm-no{
    border: none;
    height: 40px;
    width: 70px;
    margin: 0 50px;
    border-radius: 5px;
    font-size: 18px;
}
#confirm-yes{
    background-color: 	#FF6666;
    color: white;
}

#confirm-yes:hover{
    background-color: red;
}

#confirm-no:hover{
    background-color: blue;
}

#confirm-yes:focus,#confirm-yes:active{
    outline: none;
    box-shadow:0 0 2px 4px #FF99FF;
}

#confirm-no{
    background-color:#0069D9;
    color: white;
}

#confirm-no:focus,#confirm-no:active{
    outline: none;
    box-shadow:0 0 2px 4px #77AADD;
}

js文件

class Confirm {
    constructor(){
        this.body = document.body; //获取 body 元素
        this.isOpen = false;
        this.style = window.getComputedStyle ? window.getComputedStyle(this.body, null) : this.body.currentStyle;//获取 body 元素的样式对象
        //添加确认框的 Html 代码到 body 元素内部的末尾
        this.body.insertAdjacentHTML("beforeend","<div id=\"confirm-container\">" +
            "        <div id=\"confirm\">" +
            "            <div id=\"confirm-header\"><span id=\"confirm-close\">×</span></div>" +
            "            <p id=\"confirm-main\"></p>" +
            "            <div id=\"confirm-footer\">" +
            "                <button id=\"confirm-yes\">确认</button>" +
            "                <button id=\"confirm-no\">取消</button>" +
            "            </div>" +
            "        </div>" +
            "    </div>");
        this.confirmContainer = document.getElementById("confirm-container");
        this.confirmMain = document.getElementById("confirm-main");
        this.confirmYes  = document.getElementById("confirm-yes");
        this.confirmNo = document.getElementById("confirm-no");
        this.confirmClose = document.getElementById("confirm-close");
        //获取滚动条的宽度
        this.body.insertAdjacentHTML("beforeend","<div id=\"_scrollWidth\" style=\"width: 50px;height: 50px;overflow: scroll;position: fixed;left: -50px;top:-50px\"></div>");
        const scrollDiv = document.getElementById("_scrollWidth");
        this.scrollWidth = scrollDiv.offsetHeight - scrollDiv.clientWidth;
        scrollDiv.parentNode.removeChild(scrollDiv);

        //绑定点击事件。
        const that = this;
        that.confirmYes.onclick = function (){
            //设置点击事件。
            // 1、把确认框隐藏。
            // 2、恢复 body 的 overFlow 属性值
            // 3、恢复 body 的 margin-right 属性值
            that.confirmContainer.style.display = "none";
            that.body.style.overflow = that.overFlow;
            that.body.style.marginRight = that.marginRight;
            that.isOpen = false; //弹出状态变为未弹出。
            that.callBack(); //执行点击确认后的回调函数
        };

        that.confirmNo.onclick = function () {
            that.confirmContainer.style.display = "none";
            that.body.style.overflow = that.overFlow;
            that.body.style.marginRight = that.marginRight;
            that.isOpen = false;
        };
        that.confirmClose.onclick = function () {
            that.confirmContainer.style.display = "none";
            that.body.style.overflow = that.overFlow;
            that.body.style.marginRight = that.marginRight;
            that.isOpen = false;
        };
        that.confirmContainer.onclick = function(event){
            event =  event || window.event;
            let target = event.target || event.srcElement;
            if(target.id==="confirm-container"){
                //判断点击事件的对象是不是遮罩层，是遮罩层才执行。
                that.confirmContainer.style.display = "none";
                that.body.style.overflow = that.overFlow;
                that.body.style.marginRight = that.marginRight;
                that.isOpen = false;
            }
        };





    }


    hasScrollbar(){
        //判断是否有窗口滚动条
        return this.style.overflow === "scroll" || (document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight));
    }


    show(obj){

        if(this.isOpen === true){
            //判断是否已经弹出确认框，如果已经弹出则不能再弹出。
            return ;
        }


        if(typeof obj !== "object"){
            throw new TypeError("errorMessage");
        }

        if(typeof obj.message !== "string" && typeof obj.message !== "number"){
            throw new TypeError("errorMessage");
        }

        if(typeof obj.yes !== "function"){
            throw new TypeError("errorMessage");
        }


        const that = this;// 保存 this 指针。
        that.overFlow = that.style.overflow; 获取确认框弹出前 body 元素的 overflow 属性的值
        that.marginRight = that.style.marginRight;//获取确认框弹出前 body 元素的 margin-right 属性的值
        that.confirmMain.innerHTML = obj.message; //设置提示信息
        that.callBack = obj.yes;//获取点击确认按钮后执行的回调函数。
        that.confirmContainer.style.display = "flex"; //显示确认框
        that.isOpen = true;//弹出状态变成已弹出。
        if(this.hasScrollbar()===true){
            //如果有窗口滚动条
            that.body.style.overflow = "hidden"; //隐藏滚动条
            // 在 body 元素右边加上一个大小为滚动条宽度的 margin-right。
            that.body.style.marginRight = parseFloat(that.marginRight) + that.scrollWidth +"px";
        }

    }

}

岛泪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
造轮子之确认框

确认框是模态框的一种具体用途，非常常见也非常实用。第一种是没有遮罩层的确认框第二种是有遮罩层的确认框（并隐藏掉右边滚动条）第二种确认框源码下载地址https://gitee.com/island_tears/confirmation_box使用说明引入 confirm.js 和 confirm.css 文件。使用前先实例化 confirm 对象...
复制链接

扫一扫