自写网页弹窗Popup.js, 实现常用模态弹窗显示
![](https://oss.mu-jie.cc/img/popup-preview.png)
AI-摘要
Tianli GPT
AI初始化中...
介绍自己 🙈
生成本文简介 👋
推荐相关文章 📖
前往主页 🏠
前往爱发电购买
自写网页弹窗Popup.js, 实现常用模态弹窗显示
昔枫沐杰Popup.js
超轻量网页弹窗Popup.js, 利用<dialog>标签实现常用模态弹窗显示
github仓库: https://github.com/xfmujie/html-popup
在线预览&调试:https://mu-jie.cc/static-pages/PopupJS-example.html
使用示例
引入Popup.js
在线引入
1 | <script src="https://oss.mu-jie.cc/js/Popup.js"></script> |
本地引入(推荐)
1 | <script src="./Popup.js"></script> |
实例化对象
请勿重复执行此句,否则会生成多个不同的弹窗实例!
1 | var popup = new Popup(); |
示例1: 提示弹窗
1 | popup.alert('这是一个提示弹窗'); |
示例2: 确认弹窗
1 | popup.confirm('是否确认?') |
示例3: 文本输入弹窗
1 | popup.prompt('请输入文本') |
示例4: 消息弹窗
该方法有3个参数, 分别为提示文字, 自动关闭弹窗时间(可选, 缺省值:1, 单位:秒), 回调函数(可选), 详细用法见示例5
1 | popup.msg('这是一个消息弹窗 可设定时间自动关闭'); |
自动关闭时间可设为0,表示弹窗不会被自动关闭,请在特定场景中使用,因为用户无法关闭此弹窗,如需使用程序关闭,可调用.msgClose()方法
示例5: 消息弹窗的另一种用法
使用场景: 提示用户正在等待任务完成
使用逻辑: 当弹窗显示超时(超过自动关闭弹窗时间)时, 弹窗关闭并执行传入的回调函数; 如任务已在设定时间内完成, 调用.msgClose()方法关闭弹窗, 此时回调函数不会执行
请求场景示例:
1 | popup.msg('正在请求……', 5, function(){ |
评论
匿名评论隐私政策
✅ 你无需删除空行,直接评论以获取最佳展示效果