message.js一款优雅的原生JS页面消息提示插件,兼容性良好,无任何依赖
  • 分享到微信朋友圈
    X

Message.js是一款优雅的原生JS页面消息提示插件,兼容性良好,无任何依赖

代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件

调用方法

纯文本
点击复制
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script>
Qmsg.info("信息");
Qmsg.error("错误");
Qmsg.success("成功");
Qmsg.warning("警告");
Qmsg.loading("加载");
Qmsg.closeAll(); //关闭
//或者通过Qmsg.config({})来动态修改全局配置:
Qmsg.config({
showClose: true,
timeout: 5000
})
//以上方法均可以传递参数
Qmsg.loading("我是一个加载条");
Qmsg.info("这个是一个信息", {
showClose: true,
onClose: function () {
console.log('我知道了')
}
})
Qmsg.error({
content: "我是一个错误提示",
timeout: 5000
})
var loading;
loading = Qmsg.loading("loading提示~", {
onClose: function () {
console.log("loading结束~")
}
});
</script>
<script> Qmsg.info("信息"); Qmsg.error("错误"); Qmsg.success("成功"); Qmsg.warning("警告"); Qmsg.loading("加载"); Qmsg.closeAll(); //关闭 //或者通过Qmsg.config({})来动态修改全局配置: Qmsg.config({ showClose: true, timeout: 5000 }) //以上方法均可以传递参数 Qmsg.loading("我是一个加载条"); Qmsg.info("这个是一个信息", { showClose: true, onClose: function () { console.log('我知道了') } }) Qmsg.error({ content: "我是一个错误提示", timeout: 5000 }) var loading; loading = Qmsg.loading("loading提示~", { onClose: function () { console.log("loading结束~") } }); </script>
Expand
<script>
    Qmsg.info("信息");
    Qmsg.error("错误");
    Qmsg.success("成功");
    Qmsg.warning("警告");
    Qmsg.loading("加载");
    Qmsg.closeAll(); //关闭 

    //或者通过Qmsg.config({})来动态修改全局配置:
    Qmsg.config({
        showClose: true,
        timeout: 5000
    })
    //以上方法均可以传递参数

    Qmsg.loading("我是一个加载条");
    Qmsg.info("这个是一个信息", {
        showClose: true,
        onClose: function () {
            console.log('我知道了')
        }
    })
    Qmsg.error({
        content: "我是一个错误提示",
        timeout: 5000
    })

    var loading; 
        loading = Qmsg.loading("loading提示~", {
            onClose: function () {
                console.log("loading结束~")
            }
        });  

</script>

Message.js插件拥有更多的参数设置

可选参数说明

  • position String 消息显示的位置,居于顶部的左中右,'left','right','center'可选 'center'

  • showClose Boolean 是否显示关闭图标 false

  • timeout Number 多久后自动关闭,单位ms 2000

  • autoClose Boolean 是否自动关闭 true

  • content String 提示的内容 ''

  • onClose Function 关闭的回调函数 null

  • html Boolean 是否将内容作为html渲染 false

  • maxNums Number 最多显示消息(autoClose:true)的数量 5