三种基本弹框
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);