• 确认框,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-325px;margin-left:auto;margin-right:auto;top:30%'>"
            + "<div class='modal-dialog' style='auto'>"
            + "<div class='modal-content' style='auto'>"
            + "<div class='modal-header' style='padding:5px 10px;margin:4px;background-color:#eeeeee;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;auto'>" + body + "</div>"
            + "<div class='modal-footer' style='padding:5px 10px;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);
            }
        }

    以上

  • 相关阅读:
    单例设计模式
    MySQL数据类型
    MySQL创建、修改、删除数据库
    HTTP请求与响应
    netcore在CentOS7 下使用处理图片的问题
    SQL删除重复数据
    不同浏览器对cookie大小与个数的限制
    asp.net实现SQL2005的通知数据缓存
    MS SQL 设置自增长字段默认值
    MS SQL 批量操作
  • 原文地址:https://www.cnblogs.com/liuyuhangCastle/p/10457436.html
Copyright © 2020-2023  润新知