一个简单的js弹窗插件,本项目旨在帮助一些html项目添加好看的弹窗功能~
本项目来自本人项目aimage中的弹窗内容部分,当时弹窗函数写的过分潦草,于是现在拿出来单独写一个js工具
<script>
// V1.8新特性:新增控制弹窗在靠近右边和上边时的距离
var rPaddingTop = 10; // 距离顶部距离,默认20px
var rPaddingRight = 10; // 距离右边距离,默认20px
</script>
<!-- 引入js文件 -->
<script src="https://notification.randallanjie.com/r_notification.js"></script>
<script>
// 再在script中调用 rShowMessage() 方法即可
rShowMessage('我是消息~', 0, 'up', 0);
// V2.0新特性:能调用预设模板Success、Info、Warning、Error
// 注意:内容是必填的,标题是可选的,内容在前,标题在后
rStatusMessage.success('我是成功通知内容~', '成功标题'); // 其他三个分别是 info、warning、error
rStatusMessage.success('我是成功通知内容~'); // 也可以只传一个参数,这样就没有标题了,其他使用方法与success类似
</script>
打开https://notification.randallanjie.com,然后鼠标右键点击选择查看网页源代码,查看官方用法
rShowMessage(msg, save, position, autoDisappearTime);
message 弹窗内容 支持 HTML 片段
save 是否保存到sessionStorage中,1 保存,0 不保存
position 在顶部显示还是在底部显示,up 顶部,down 底部
autoDisappearTime 自动消失时间,0 不消失,其他 固定ms消失
弹窗可在右上角出现,新弹窗可以设置在已有弹窗上面出现(设置 position
为 "up"
)或者已有弹窗下面出现(设置 position
为 "down"
)
默认为在上方出现
点击弹窗使弹窗消失此方法已在V2.5中移除,改为滑动消失
在弹窗显示的时候点击弹窗气泡即可使得弹窗消失
- 滑动弹窗消失
- 将弹窗右滑消失,左滑取消其自动消失
- 在发送弹窗时使弹窗定时消失
- 在js中发送弹窗时将其
autoDisappearTime
设置为非0正整数,即可实现对应数毫秒后自动关闭弹窗
V1.8新特性
macOS系统按住 option
键有相同效果
V1.8新特性
在引入 script
前进行对 rPaddingTop
和 rPaddingRight
进行定义,未定义时默认为20
V2.0新特性
V2.0新增四个预设模板(success、info、warning、error)
注意:内容是必填的,标题是可选的,内容在前,标题在后
rStatusMessage.success('我是成功通知内容~', '成功标题'); // 其他三个分别是 info、warning、error
rStatusMessage.success('我是成功通知内容~'); // 也可以只传一个参数,这样就没有标题了,其他使用方法与success类似
V2.1新特性
V2.1版本之后函数自动返回1个11位字符串,例如: 'dg7ygolkciu'
现可以通过该字符串更改弹窗内容
var msgId = rShowMessage('修改之前的消息~', 0, 'up', 0); // msgId 应是类似 'xdfknjp0kig' 的字符串
// 现在调用更改弹窗内容函数
rChangeMessage(msgId, '修改后'); // 调用后立即更改弹窗内容
V2.5新特性
V2.5版本之后用户能够左滑弹窗使得将该弹窗气泡的定时消失功能取消
message
属性虽然支持传入 HTML
片段,但是在网站上动态渲染任意 HTML
是非常危险的,因为容易导致 XSS
攻击。 因此请确保 message
的内容是可信的,永远不要将用户提交的内容赋值给 message
属性。由于本项目是js插件,用户能直接在控制台调用 showMessage
函数,后期更新将在内部修改进行安全性判定
2023-10-20
修复移动弹窗时滑动显示不全的问题,更新pin的逻辑(存在pin即为不会自动消失)
2023-10-19
紧急修复V2.5中无法触摸移动弹窗的问题
2023-10-19
修改弹窗移除方式,增加pin便于判断弹窗是否会自动移除
2023-09-25
增加更改弹窗内容模块
2023-09-21
增加模板预设(success、info、warning、error)
2023-09-19
封装方法,防止内部变量被外部修改,或者内部方法被外部调用
2023-09-17
修复弹窗残影问题、宽度适配、新增按住alt点击选择文本复制不关闭弹窗、新增控制弹窗在靠近右边和上边时的距离
2023-09-15
修复弹窗内容过长导致弹窗高度不够的问题
2023-09-14
弹窗内容支持HTML文本,改用js文件引入
2023-09-14
解决上下弹窗动画问题
2023-09-13
解决重复删除弹窗错误
2023-09-10
增加种类选择
2023-09-07
添加上下两处弹窗选择
2023-09-05
整合弹窗代码
2023-08-04
创建模板