zoukankan      html  css  js  c++  java
  • 确认框,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);
            }
        }

    以上

  • 相关阅读:
    【Cookie】java.lang.IllegalArgumentException An invalid character [32] was present in the Cookie value
    【会话技术】Cookie技术 案例:访问时间
    进程池
    管道和Manager模块(进程之间的共享内容)
    队列
    锁Lock,信号量Semaphore,事件机制Event
    multiprocess模块
    进程
    reduce
    struct模块
  • 原文地址:https://www.cnblogs.com/liuyuhangCastle/p/10457436.html
Copyright © 2011-2022 走看看