Html自定义alert,confirm弹窗

系统自带的 alert confirm 弹窗 能阻塞进程，功能非常强大，但是样式受到限制，不能与项目的样式搭配。所以在具体项目中可能需要自定义弹窗。具体做法显示一个高度宽度百分之百的背景遮罩，然后在屏幕中间显示一个div，虽然不能做到与alert，confirm一样阻塞进程，但是也可以实现类似效果

<!-- 宽高百分之百的背景遮罩 -->
	<div class="mask-div"></div>
	<!-- 提示弹出框 -->
	<div class="alert-dialog">
		<div class="alert-title clearfix">
			<span>提示信息</span>
			<img th:src="@{/images/department/closed.png}" alt=""/>
		</div>
		
		<div class="alert-show clearfix">
			<div class="alert-content clearfix">
			</div>
		</div>

		<!-- 确定按钮 -->
		<div class="alert-btn clearfix">
			<button class="btn btn-default">确定</button>
			
		</div>
	</div>
	<!-- 选择弹出框  -->
	<div class="option-dialog">
		<div class="option-title clearfix">
			<span>提示信息</span>
			<img th:src="@{/images/department/closed.png}" alt=""/>
		</div>
		
		<div class="option-show clearfix">
			<div class="option-content clearfix">
			</div>
		</div>

		<!-- 确定按钮 -->
		<div class="option-btn clearfix">
			<button class="btn btn-default sure">确定</button>
			<button class="btn btn-default cancle">取消</button>
		</div>
	</div>

// 警告弹窗关闭
    $('.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