确认框,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' onclick='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' onclick='" + yesFun + ";closeSimpleModal()' style='margin:2px 5px'>确认</button>"

        + "<button type='button' class='btn btn-default btn-sm' data-dismiss='modal' onclick='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);

        }

    }

以上