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

前言

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

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

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

1，面向功能

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

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

我们开发新的弹窗，包括

\"自定义标题title\"

\"自定义内容核心\"

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

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

2，构建布局

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

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

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

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

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

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

我们看代码：

 
 标题 X 
 
 内容 
 
 确定取消 
 

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

这个不是我们本章的重点，我就直接给大家看我的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 = ` 
 ${this.title} X 
 
 ${this.content} 
 
 确定取消 
 `; 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文件全部封装好了，所以引用文件后调用即可

       function fok() { console.log(\"点击了OK\"); }//回调函数自定义为打印测试 function fno() { console.log(\"点击了no\"); } const yourmsgbox = new NewMsgBox(\"提示\", \"主信息测试中\", fok, fno); yourmsgbox.open(); 

封装文件和使用指南

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

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.jsclass 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 = ` 
 ${this.title} X 
 
 ${this.content} 
 
 确定取消 
 `; 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文件相同根目录）中引入外部css样式  内顶端引入外部JavaScript交互 ......下面是你的script内容 -----------------------------------------------------------------------------------此类（NemMsgBox）的具体调用方法const yourmsgbox = new NewMsgBox(\"提示\", \"主信息测试中\", fok, fno);其中类名：NewMsgBox ;参数一：\"提示\"; (解释:生成弹窗的标题)参数二：\"你未获得当前权限\"; （解释：生成弹窗的主内容）参数三：fok; （解释：点击弹窗中的\"确定\"后运行的回调函数fok，函数由用户自定义）参数四：fno; （解释：点击弹窗中的\"取消\"后运行的回调函数fno，函数由用户自定义） 调用使用 yourmsgbox.open();即可。-----------------------------------------------------------------------------------完整使用案例：       function fok() { console.log(\"点击了OK\"); }//回调函数自定义为打印测试 function fno() { console.log(\"点击了no\"); } const yourmsgbox = new NewMsgBox(\"提示\", \"主信息测试中\", fok, fno); yourmsgbox.open(); -----------------------------------------------------------------------------------

文件链接

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

点此跳转下载文件

感谢观看！