三種基本彈框

1.提示框，一秒停留

  $.messager.show({
            title: '提示',
            msg: '修改成功！',
            showType: 'fade',      //設置顯示類型
            style: { left: 500, top: 100 },     //設置彈框的位置
            width:100,                           //設置彈框的寬度和高度
            height:200,
            timeout: 1000      //設置停留時間，1000毫秒
        });

效果圖

2.警告框，用戶必須確認

    $.messager.alert("操作提示", "請完善商品信息！", "warning");

3.二次確認框，用戶可以二次選擇是否執行

$.messager.confirm('提示', '確定刪除此用戶嗎？', function (r) {
        if (r) {
            執行確認提示後代碼
        } else {
            return;
        }
    });

擴展

/**
* 設置彈框統一的格式
* 指定位置顯示$.messager.show
* options $.messager.show的options
* param = {left,top,right,bottom}
*/
$.extend($.messager, {
    showBySite: function (options, param) {
        var site = $.extend({
            left:"",
            top: "",
            right: 0,
            bottom: -document.body.scrollTop
                          - document.documentElement.scrollTop
        }, param || {});

        var win = $("body > p .messager-body");
        if (win.length <= 0)
            $.messager.show(options);
        win = $("body > p .messager-body");
        win.window("window").css({

            left: 100,                 //在css統一設置設置彈出框的位置
            top: 200,
            right: site.right,
            zIndex: $.fn.window.defaults.zIndex++,
            bottom: site.bottom
        });
    }
});

/*
* 設置彈框的內容
*/

function showBySite(event) {
    var element = document.elementFromPoint(event.x, event.y);//獲取點擊對象
    $.messager.showBySite({
        title: 'My Title',
        msg: 'Message.',
        showType: 'show'
    }, {
        top: $(element).position().top + $(element).height(),//將$.messager.show的top設置為點擊對象之下
        left: $(element).position().left,//將$.messager.show的left設置為與點擊對象對齊
        bottom: ""
    });
}

    //在需要彈框的位置調用相應的彈框內容
    showBySite(event);

總結：

抽象 封裝 復用。