前端交互自定义封装类：“双回调自定义信息弹窗”

发布于：2025-07-10 ⋅ 阅读:(20) ⋅ 点赞:(0)

前言

我们在开发过程中，会用到很多已经封装好的类，来简化我们的工程------面向对象编程思想

本文介绍一个作者自己开发的一个类，因为是我接触前端以来开发的第一个类，具有纪念意义，而且功能挺普遍也很灵活，所以想着发个博客给大家分享一下。

代入切身体会一个类的开发

1，面向功能

我们此次开发的是一个类似于原生alert()函数的弹窗信息，但是原生的功能很有限，我们打算开发一个更灵活，效果更多的自定义弹窗。

网页自带的原生alert()弹窗：

我们开发新的弹窗，包括

"自定义标题title"

"自定义内容核心"

"确认"和"取消"两个不同的按钮对应两个不同的自定义"回调函数事件"

通过我们的设想，我们确定了基本功能，现在我们开发基本框架节点布局和样式。

2，构建布局

这是个比较简单的一个步骤，我们经过稍微分析，可以发现主要包括几个部分

1，主容器 box （容纳全部）

2，头部容器header （容纳 标题 和 关闭按钮）

3，主体容器:body  (容纳核心内容）

4，尾部容器:tail    （容纳 "确认"和"取消"两个按钮）

5，遮盖层：backdrop（用于启动弹窗后半透明遮挡网页部分，在视觉效果上将焦点集中于弹窗）

我们看代码：

<div class = "box">    
<div class="head-box">
            标题
            <span class="head-icon">X</span>
        </div>
        <div class="body-box">
            内容
        </div>
        <div class="foot-box-laolong">
            <span class="if-ok">确定</span><span class="if-ok">取消</span>
        </div>
  </div>

其中我们为每个节点添加适合的样式，

这个不是我们本章的重点，我就直接给大家看我的css代码了

3，添加样式

样式中需要提的几个点有

 transform: translate(-50%, -50%);
 /*向左和向上移动自身50%的像素，正好用于抵消左上顶点定位到网页中央的偏差*/

align-items: center;  /* 垂直居中 */

align-content: center   /* 多行内容时的垂直居中 */
color: #dcfd1f;
 text-indent:   /* 首行缩进容器宽度的 5% */

z-index: 999;
/* 保证在大部分内容之上，但低于弹窗 */

.box-style {

            width: 30%;
            height: 20%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /*向左和向上移动自身50%的像素，正好用于抵消左上顶点定位到网页中央的偏差*/
            background-color: rgba(8, 113, 225, 0.483);
            border-radius: 10px;
            cursor: default;
            z-index: 1000;
        }

        .head-box {
            border-radius: 10px 10px 0 0;
            width: 100%;
            height: 20%;
            background-color: rgba(8, 113, 225, 0.483);
            font-size: 150%;
            align-items: center;
            /* 垂直居中 */
            align-content: center;
            /* 多行内容时的垂直居中 */
            color: #dcfd1f;
            text-indent: 5%;
            /* 首行缩进容器宽度的 5% */
        }

        .head-icon {
            border-radius: 10px;
            margin-right: 0px;
            height: 100%;
            font-size: 130%;
            font-weight: 800;
            line-height: 100%;
            width: 10%;
            color: red;
            text-align: center;
            align-items: center;
            /* 垂直居中 */
            align-content: center;
            /* 多行内容时的垂直居中 */
            float: right;
        }

        .head-icon:hover {
            cursor: pointer;
            background-color: #494646;
            color: yellow;
        }

        .body-box {
            align-items: center;
            /* 垂直居中 */
            align-content: center;
            /* 多行内容时的垂直居中 */
            width: 100%;
            height: 50%;
            background-color: rgba(8, 113, 225, 0.483);
            text-align: center;
            color: rgb(250, 253, 253);
            font-size: 200%;
            border-bottom: 1px ridge rgb(1, 1, 1, 0.8);
            border-top: 1px ridge rgb(1, 1, 1, 0.8);
        }

        .foot-box {
            width: 100%;
            height: 30%;
            background-color: rgba(8, 113, 225, 0.483);
            align-items: center;
            /* 垂直居中 */
            align-content: center;
            /* 多行内容时的垂直居中 */
        }

        .if-ok {
            display: inline-block;
            height: 60%;
            width: 20%;
            background-color: #254281;
            margin-left: 20%;
            border-radius: 10px;
            font-size: 150%;
            line-height: 100%;
            align-items: center;
            /* 垂直居中 */
            align-content: center;
            /* 多行内容时的垂直居中 */
            text-align: center;
            color: rgba(164, 229, 233, 0.8)
        }

        .if-ok:hover {
            background-color: #494646;
            cursor: pointer;
            color: yellow;
        }

        .back-drop {
            position: fixed;
            /* 固定定位，覆盖整个视口 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            /* 半透明黑色背景 */
            z-index: 999;
            /* 保证在大部分内容之上，但低于弹窗 */
        }

4，实现功能

一，构造函数参数

首先定义一个类，包含两个字符串参数和两个回调函数参数

class NewMsgBox {
    constructor(title = "", content = "", ok_fct, no_fct) {
        this.title = title;
        this.content = content;
        this.ok_fct = ok_fct;
        this.no_fct = no_fct;
    }

}

二，create创键窗口div节点

我们需要两个窗口节点

窗口一：容纳弹窗所有部分

窗口二：用于外部的遮盖层

创建好节点后给其添加上写好的css样式

并且窗口一中要注册两个事件，

事件一：点击叉号关闭两个窗口

事件二：点击外部遮盖层关闭两个窗口

 creatbox() {
        this.newbox = document.createElement("div");  
        this.backdrop = document.createElement("div");
        this.newbox.className = "box-style";  
        this.backdrop.className = "back-drop";
        this.newbox.innerHTML = `
        <div class="head-box">
            ${this.title}
            <span class="head-icon">X</span>
        </div>
        <div class="body-box">
            ${this.content}
        </div>
        <div class="foot-box">
            <span class="if-ok-laolong" id = "ok">确定</span><span class="if-ok" id = "no">取消</span>
        </div>
                `;
        const closeBtn = this.newbox.querySelector(".head-icon");
        closeBtn.addEventListener("click", () => {  
            this.closebox();
            console.log("通过点击小红叉关闭窗口");
        });

        this.backdrop.addEventListener("click", (e) => {

            e.stopPropagation(); //为了防止事件冒泡

            this.closebox();
            console.log("通过点击遮罩层关闭窗口");
        });
    }

三，调用打开窗口

open函数中要先创建窗口节点，才能后续调用，

并且使用document.body.appendChild将节点添加到DOM树上

并且为尾部两个按钮注册上按钮回调事件，点下制定按钮，回调运行指定函数。

    open() {
        this.creatbox();
        document.body.appendChild(this.newbox);
        document.body.appendChild(this.backdrop);
        const btns = document.querySelectorAll(".if-ok");
        btns.forEach(btnx => {
            btnx.addEventListener("click", (e) => {
                e.stopPropagation();//防止事件冒泡

                if (btnx.id === "ok") {
                    this.ok_fct();
                    this.closebox();
                }
                else if (btnx.id === "no") {
                    this.no_fct();
                    this.closebox();
                }
            })

        })
    }

四，close子函数

用于需要关闭所有窗口的地方调用

   closebox() {
        this.newbox.remove(); 
        this.backdrop.remove();  
    }

调用方法

自定义两个你想触发的回调函数（这里我以打印为例），

然后const yourmsgbox = new NewMsdBox（）声明新类，其中四个参数

然后调用open()函数打开即可，

你可以将open函数的调用注册到指定按钮或者事件上，这样即可实现自定义的提示和跳转

=> 返回路径一：无动作 

=>返回路径二：回调函数一 

=>返回路径三：回调函数二

其中我把css文件和JavaScript文件全部封装好了，所以引用文件后调用即可

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="LaoLongMsgBoxStyle.css">
</head>
<body>
    <script src="LaoLongMsgBoxClass.js"></script>
    <script>
        function fok() { console.log("点击了OK"); }//回调函数自定义为打印测试
        function fno() { console.log("点击了no"); }
        const yourmsgbox = new NewMsgBox("提示", "主信息测试中", fok, fno);
        yourmsgbox.open();
    </script>
</body>
</html>

封装文件和使用指南

（其中所有的样式名都加入了作者编码，防止外部调用重名函数导致的报错，按照规定调用即可）

LaoLongMsgBoxStyle.css

/*LaoLongMsgBoxStyle.css*/
.box-style-laolong {

            width: 30%;
            height: 20%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            background-color: rgba(8, 113, 225, 0.483);
            border-radius: 10px;
            cursor: default;
            z-index: 1000;
        }

        .head-box-laolong {
            border-radius: 10px 10px 0 0;
            width: 100%;
            height: 20%;
            background-color: rgba(8, 113, 225, 0.483);
            font-size: 150%;
            align-items: center;
            align-content: center;
            color: #dcfd1f;
            text-indent: 5%;
        }

        .head-icon-laolong {
            border-radius: 10px;
            margin-right: 0px;
            height: 100%;
            font-size: 130%;
            font-weight: 800;
            line-height: 100%;
            width: 10%;
            color: red;
            text-align: center;
            align-items: center;
            align-content: center;
            float: right;
        }

        .head-icon-laolong:hover {
            cursor: pointer;
            background-color: #494646;
            color: yellow;
        }

        .body-box-laolong {
            align-items: center;
            align-content: center;
            width: 100%;
            height: 50%;
            background-color: rgba(8, 113, 225, 0.483);
            text-align: center;
            color: rgb(250, 253, 253);
            font-size: 200%;
            border-bottom: 1px ridge rgb(1, 1, 1, 0.8);
            border-top: 1px ridge rgb(1, 1, 1, 0.8);
        }

        .foot-box-laolong {
            width: 100%;
            height: 30%;
            background-color: rgba(8, 113, 225, 0.483);
            align-items: center;
            align-content: center;
        }

        .if-ok-laolong {
            display: inline-block;
            height: 60%;
            width: 20%;
            background-color: #254281;
            margin-left: 20%;
            border-radius: 10px;
            font-size: 150%;
            line-height: 100%;
            align-items: center;
            align-content: center;
            text-align: center;
            color: rgba(164, 229, 233, 0.8)
        }

        .if-ok-laolong:hover {
            background-color: #494646;
            cursor: pointer;
            color: yellow;
        }

        .back-drop-laolong {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 999;
        }

LaoLongMsgBoxClass.js

//LaoLongMsgBoxClass.js
class NewMsgBox {
    constructor(title = "", content = "", ok_fct, no_fct) {
        this.title = title;
        this.content = content;
        this.ok_fct = ok_fct;
        this.no_fct = no_fct;
    }
    creatbox() {
        this.newbox = document.createElement("div");  
        this.backdrop = document.createElement("div");
        this.newbox.className = "box-style-laolong";  
        this.backdrop.className = "back-drop-laolong";
        this.newbox.innerHTML = `
        <div class="head-box-laolong">
            ${this.title}
            <span class="head-icon-laolong">X</span>
        </div>
        <div class="body-box-laolong">
            ${this.content}
        </div>
        <div class="foot-box-laolong">
            <span class="if-ok-laolong" id = "ok-laolong">确定</span><span class="if-ok-laolong" id = "no-laolong">取消</span>
        </div>
                `;
        const closeBtn = this.newbox.querySelector(".head-icon-laolong");
        closeBtn.addEventListener("click", () => {  
            this.closebox();
            console.log("通过点击小红叉关闭窗口");
        });

        this.backdrop.addEventListener("click", (e) => {

            e.stopPropagation(); 

            this.closebox();
            console.log("通过点击遮罩层关闭窗口");
        });
    }
    open() {
        this.creatbox();
        document.body.appendChild(this.newbox);
        document.body.appendChild(this.backdrop);
        const btns = document.querySelectorAll(".if-ok-laolong");
        btns.forEach(btnx => {
            btnx.addEventListener("click", (e) => {
                e.stopPropagation();

                if (btnx.id === "ok-laolong") {
                    this.ok_fct();
                    this.closebox();
                }
                else if (btnx.id === "no-laolong") {
                    this.no_fct();
                    this.closebox();
                }
            })

        })
    }

    closebox() {
        this.newbox.remove(); 
        this.backdrop.remove();  
    }
}

LaoLongMsgBoxHelp.txt


-----------------------------------------------------------------------------------

HELLO 欢迎使用“牢笼自定义信息交互弹窗”
调用方法后生成包含
自定义"标题"  自定义"内容"  "确认"和"取消"点击后自定义不同的"回调函数"
点击"叉号"|"确认"|"取消"|"遮罩层"均可关闭弹窗

-----------------------------------------------------------------------------------

首先是两个外部文件的引入:（假设已下载外部文件与你的html文件相同根目录）

<head>中引入外部css样式
<link rel="stylesheet" href="LaoLongMsgBoxStyle.css">     
 </head>
 
<script>内顶端引入外部JavaScript交互
 <script src="LaoLongMsgBoxClass.js"></script>
......下面是你的script内容
 </script>

-----------------------------------------------------------------------------------

此类（NemMsgBox）的具体调用方法
const yourmsgbox = new NewMsgBox("提示", "主信息测试中", fok, fno);
其中
类名：NewMsgBox ;
参数一："提示";     (解释:生成弹窗的标题)
参数二："你未获得当前权限";   （解释：生成弹窗的主内容）
参数三：fok;            （解释：点击弹窗中的"确定"后运行的回调函数fok，函数由用户自定义）
参数四：fno;            （解释：点击弹窗中的"取消"后运行的回调函数fno，函数由用户自定义） 

调用使用 yourmsgbox.open();即可。

-----------------------------------------------------------------------------------

完整使用案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="LaoLongMsgBoxStyle.css">
</head>
<body>
    <script src="LaoLongMsgBoxClass.js"></script>
    <script>
        function fok() { console.log("点击了OK"); }//回调函数自定义为打印测试
        function fno() { console.log("点击了no"); }
        const yourmsgbox = new NewMsgBox("提示", "主信息测试中", fok, fno);
        yourmsgbox.open();
    </script>
</body>
</html>

-----------------------------------------------------------------------------------

文件链接

通过网盘分享的文件：牢笼双回调自定义弹窗.zip
链接: https://pan.baidu.com/s/1bXPMPpeFda3ie1XSNBXy1A?pwd=LONG 提取码: LONG

点此跳转下载文件

 

感谢观看！

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布