<!-- 宽高百分之百的背景遮罩 --> <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