当前位置： 首页 > news >正文

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

news 2025/7/10 12:24:59

前言

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

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

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

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

点此跳转下载文件

 

感谢观看！

http://www.lryc.cn/news/583330.html

相关文章：

  • ClickHouse 时间范围查询：精准筛选「本月数据」
  • pytorch 自动微分
  • Git 详解：从概念，常用命令，版本回退到工作流
  • sqlplus表结构查询
  • 3.常⽤控件
  • 跨平台ROS2视觉数据流：服务器运行IsaacSim+Foxglove本地可视化全攻略
  • 【动手学深度学习】4.9. 环境和分布偏移
  • MyBatis之数据操作增删改查基础全解
  • tinyxml2 开源库与 VS2010 结合使用
  • MySQL8.0基于GTID的组复制分布式集群的环境部署
  • 如何通过配置gitee实现Claude Code的版本管理
  • SpringBoot校园疫情防控系统源码
  • Flink1.20.1集成Paimon遇到的问题
  • stm32Cubmax的配置
  • 微信小程序91~100
  • Pycharm 报错 Environment location directory is not empty 如何解决
  • 基于Spring Boot+Vue的巴彦淖尔旅游网站（AI问答、腾讯地图API、WebSocket及时通讯、支付宝沙盒支付）
  • Ragas的Prompt Object
  • NHibernate案例
  • SAP ERP与Oracle EBS对比，两个ERP系统有什么区别？
  • aichat-core简化 LLM 与 MCP 集成的前端核心库（TypeScript）
  • C#项目 在Vue/React前端项目中 使用使用wkeWebBrowser引用并且内部使用iframe网页外链 页面部分白屏
  • Spring IoC 如何实现条件化装配 Bean？
  • HUAWEI HiCar6.0的新变化
  • 一条Redis命令是如何执行的？
  • C++随机打乱函数：简化源码与原理深度剖析
  • 从零开始学前端html篇2
  • 微信小程序控制空调之微信小程序篇
  • 双esp8266-01s间TCP通讯
  • 图像硬解码和软解码