系统自带的 alert confirm 弹窗 能阻塞进程,功能非常强大,但是样式受到限制,不能与项目的样式搭配。所以在具体项目中可能需要自定义弹窗。具体做法显示一个高度宽度百分之百的背景遮罩,然后在屏幕中间显示一个div,虽然不能做到与alert,confirm一样阻塞进程,但是也可以实现类似效果
提示信息
确定
提示信息
确定
取消
// 警告弹窗关闭
$('.alert-dialog .alert-title img').on('click',function(){
$('.mask-div').css('display', 'none');
$('.alert-dialog').css('display', 'none');
});
//警告弹窗关闭
$(".alert-btn button").on("click",function()
{
$('.mask-div').css('display', 'none');
$('.alert-dialog').css('display', 'none');
});
//选择弹窗关闭
$('.option-dialog .option-title img').on('click',function(){
closeConfirm();
});
//选择弹窗关闭
$(".option-btn .cancle").on("click",function()
{
closeConfirm();
});
//提示框
function alertShow(msg)
{
$('.mask-div').css('display', 'block');
$('.alert-dialog').css('display', 'block');
$(".alert-content").text(msg);
letDivCenter('.alert-dialog');
}
//选择框
function confirmShow(msg,obj,fn)
{
$('.mask-div').css('display', 'block');
$('.option-dialog').css('display', 'block');
$(".option-content").text(msg);
letDivCenter('.option-dialog');
$(".option-btn .sure").bind("click",obj,fn);//点击确定后续事件绑定
}
function closeConfirm()
{
$('.mask-div').css('display', 'none');
$('.option-dialog').css('display', 'none');
$(".option-btn .sure").unbind();//关闭弹窗,解除事件绑定
}
//让指定的DIV始终显示在屏幕正中间
function letDivCenter(divName){
var top = ($(window).height() - $(divName).height())/2;
var left = ($(window).width() - $(divName).width())/2;
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
$(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();
}
具体做法
//点击组织架构删除
$(".subdivision").on("click",".delete",function()
{
var _self=$(this);
if(_self.data("deptId") == null)
{
alertShow("该节点不允许删除");
return;
}
confirmShow("确认删除?",_self,function()
{
$.ajax({
url:"/department/deldepartment",
type:"post",
data:{departmentId:_self.data("deptId")},
success:function(data)
{
closeConfirm();
if(data == "Y")
{
_self.parent().parent().remove();
updateTree();//跟新收缩图标显示隐藏
}
else
{
alertShow("请确认子部门是否已经清空");
}
}
});
});
});
如图
点击组织架构删除,调用confirmShow 第一个参数是需要展示的字符串“确认删除?”,第二个参数是需要传递的参数obj(也可用data={}),第三个参数是一个函数fn,用来绑定确定按钮点击事件。即点击确定会执行fn,入参obj