html alert属性可以自定义,Html自定义alert,confirm弹窗

系统自带的 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

你可能感兴趣的:(html,alert属性可以自定义)