【jquery+easyUI】-- $.messager.show 弹框显示

三种基本弹框

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 > div .messager-body");        if (win.length <= 0)            $.messager.show(options);        win = $("body > div .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);

总结：

抽象 封装 复用。