使用示例
使用方法1
<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中调用 showMessage() 方法即可
rShowMessage('我是消息~', 0, 'up', 0);
// V2.0新特性:能调用预设模板Success、Info、Warning、Error
// 注意:内容是必填的,标题是可选的,内容在前,标题在后
rStatusMessage.success('我是成功通知内容~', '成功标题'); // 其他三个分别是 info、warning、error
rStatusMessage.success('我是成功通知内容~'); // 也可以只传一个参数,这样就没有标题了,其他使用方法与success类似
</script>
使用方法2
在本页鼠标右键点击选择查看网页源代码,看看我是怎么用的
参数说明
rShowMessage(msg, save, position, autoDisappearTime)
message 弹窗内容 支持 HTML 片段
save 是否保存到sessionStorage中,1 保存,0 不保存
position 在顶部显示还是在底部显示,up 顶部,down 底部
autoDisappearTime 自动消失时间,0 不消失,其他 固定ms消失
注意
message 属性虽然支持传入 HTML 片段,但是在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。 因此在 dangerouslyUseHTMLString 打开的情况下,请确保 message
的内容是可信的,永远不要将用户提交的内容赋值给 message 属性。
当前版本:
~
更新日志:
·V1.0 2023-08-04 创建模板
·V1.1 2023-09-05 整合弹窗代码
·V1.2 2023-09-07 添加上下两处弹窗选择
·V1.3 2023-09-10 增加种类选择
·V1.4 2023-09-13 解决重复删除弹窗错误
·V1.5 2023-09-14 解决上下弹窗动画问题
·V1.6 2023-09-14 弹窗内容支持HTML文本,改用js文件引入
·V1.7 2023-09-15 修复弹窗内容过长导致弹窗高度不够的问题
·V1.8 2023-09-17 修复弹窗残影问题、宽度适配、新增按住alt点击选择文本复制不关闭弹窗、新增控制弹窗在靠近右边和上边时的距离
·V1.9 2023-09-19 封装方法,防止内部变量被外部修改,或者内部方法被外部调用
·V2.0 2023-09-21 增加模板预设(success、info、warning、error)
·V2.1 2023-09-25 增加更改弹窗内容模块
·V2.5 2023-10-19 修改弹窗移除方式,增加pin便于判断弹窗是否会自动移除
·V2.6 2023-10-19 紧急修复V2.5中无法触摸移动弹窗的问题
·V2.7 2023-10-20 修复移动弹窗时滑动显示不全的问题,更新pin的逻辑(存在pin即为不会自动消失)
Powered By Randall
");
const msgId = rStatusMessage.success("复制代码成功~");
} catch (err) {
rStatusMessage.error(err, "复制代码错误", 0, 'up', 0);
}
}
function howToUse() {
if (show === 0) {
show = 1;
document.getElementById('eg').style.display = 'block';
rShowMessage(`感谢使用 R_Notification.js