AloneJs.msgbox()——弹出消息框

一、引用

<link href="https://cdn.suziyun.com/alonejs.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdn.suziyun.com/alonejs.min.js"></script>

二、调用示例

1、弹出基本消息框：

iBox.msgbox("你好！", "系统提示");

图 1

2、弹出模态消息框：

iBox.msgbox("你好！", "系统提示", {
    modal: true
});

图 2

3、弹出带【确定】和【取消】按钮的模态消息框，并设置宽度位为 200px：

iBox.msgbox("你好！", "系统提示", function (e) {
    alert("确定");
}, function (e) {
    alert("取消");
}, {
    width: 200,
    modal: true
});

图 3

4、点击【取消】按钮，不让消息框关闭：

iBox.msgbox("你好！", "系统提示", function (e) {
    alert("确定");
}, function (e) {
    alert("取消");
    return false;//返回false即可不让消息框关闭，同样【确定】按钮也支持。
}, {
    width: 200,
    modal: true
});

图 4

5、在消息框关闭时执行自定义逻辑：

iBox.msgbox("你好！", "系统提示", function (e) {
    alert("确定");
}, function (e) {
    alert("取消");
    return false;//返回false即可不让消息框关闭
}, {
    width: 200,
    modal: true,
    fnClose: function (e) {
        alert("关闭");
        //return false;//如果这里返回false，同样会阻止消息框关闭
    }
});

图 5

6、让消息框弹出后在指定时间后自动关闭，此时不会显示右上角的“x”关闭按钮，以及【确定】和【取消】按钮：

iBox.msgbox("你好！", "系统提示", function (e) {
    alert("确定");
}, function (e) {
    alert("取消");
    return false;//返回false即可不让消息框关闭
}, {
    width: 200,
    modal: true,
    fnClose: function (e) {
        alert("关闭");
    },
    autoClose: 1200 //指定autoClose为1200毫秒，即可让消息框在1200毫秒后自动关闭，关闭时同样会触发fnClose事件。
});

图 6

7、在消息框显示完成之后，执行自定义逻辑，例如，在内容里面添加“hello world”两个红色单词：

iBox.msgbox("你好！", "系统提示", function (e) {
    alert("确定");
}, function (e) {
    alert("取消");
    return false;//返回false即可不让消息框关闭
}, {
    width: 200,
    modal: true,
    fnClose: function (e) {
        alert("关闭");
    },
    fnComplete: function (e) {
        e.$scope.find('.msgbox-content').append('<span style="color:red">hello world</span>');//这里的e.$scope就是当前消息框的jQuery对象
    }
});

图 7