确认框,confirm工具封装

用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()'>&times;</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);
        }
    }

 

以上

 

转载于:https://www.cnblogs.com/liuyuhangCastle/p/10457436.html