用bootstrap封装了个确认框工具
效果如下
代码如下:
/** * 以模态窗做确认框的函数,title为标题栏内容,body为消息体,yesFun为点击确认按钮后执行的函数,执行后会执行关闭并删除该模态窗的函数 * 该模态窗只有模态窗 * @param:title:提示标题 * @param:body:提示内容 * @param:yesFun:点击确定后将执行的js函数 */ function modalInit(title, body, yesFun) { var modal = "<div class='modal fade simple-modal' tabindex='-1' role='dialog' aria-hidden='true'" + "style='position:fixed;z-index:3000;max-width:325px;margin-left:auto;margin-right:auto;top:30%'>" + "<div class='modal-dialog' style='width:auto'>" + "<div class='modal-content' style='width:auto'>" + "<div class='modal-header' style='padding:5px 10px;margin:4px;background-color:#eeeeee;width:auto'>" + "<button type='button' class='close' data-dismiss='modal' aria-hidden='true' οnclick='closeSimpleModal()'>×</button>" + "<h4 class='modal-title' style='padding:2px 10px;'>" + title + "</h4>" + "</div>" + "<div class='modal-body text-warning text-center' style='padding:10px;font-size:16px;width:auto'>" + body + "</div>" + "<div class='modal-footer' style='padding:5px 10px;width:auto'>" + "<button type='button' class='btn btn-danger btn-sm' οnclick='" + yesFun + ";closeSimpleModal()' style='margin:2px 5px'>确认</button>" + "<button type='button' class='btn btn-default btn-sm' data-dismiss='modal' οnclick='closeSimpleModal()' style='margin:2px 5px'>取消</button>" + "</div></div></div>"; if ($('body').find('.simple-modal').length == 0) { //body中并没有任何没有被关掉的simple的模态窗 $('body').append(modal); } $('.simple-modal').modal('show'); //展示模态窗 $('body').unbind('click.mo') setTimeout(function() { $('body').bind('click.mo', function() { $('.simple-modal').modal('hide'); $('.modal-backdrop').remove(); }) }, 200) } /** * 点击取消或遮罩时候将执行的关闭确认框函数 */ function closeSimpleModal() { $('.simple-modal').remove(); $('.modal-backdrop').remove(); }
调用举例:
/** * 展示详细中的删除user按钮点击函数 */ function removeUser() { var id = $('#user-detail-id').html(); modalInit('操作确认!!', "确认删除当前用户?", "removeUserSubmit(" + id + ")");//调用确认框 } /** * 删除user按提交函数,确认框中点击确认后删除的提交的函数 */ function removeUserSubmit(id) { if (id != null && id != '' && typeof id != 'undefined') { $.ajax({ type : 'POST', url : local + "user/removeUserById.do", data : { id : id }, async : true, success : function(resultMap) { if (resultMap.status == "success") { //成功则显示详细 $('#bottom-page-in').load(local + 'one/user/user-index.html'); $('#body #menu-jump-page').hide(300); //lyhFloatTip("删除成功...正在刷新..."); } else { //topTipModal("操作提示:", "<span class='text-warning'>" + resultMap.message + "</span>", 12000); return null; } }, error : function(resultMap) { console.error(resultMap); } }); } else { //topTipModal("操作提示:", "<span class='text-warning'>删除操作传入的id有问题,请重试</span>", 12000); } }
以上