zoukankan      html  css  js  c++  java
  • 基于layer简单的弹层封装

    /**
     * 产生长度为32的Guid字符串
     */
    function getGuid32() {
        var rt_str = String.fromCharCode(65 + Math.floor(Math.random() * 26));
        for (i = 0; i < 31; ++i) {
            var num = Math.floor(Math.random() * (26 + 26 + 10));
            var ch_str;
            if (num < 10) {
                ch_str = num.toString();
            }
            else if (num < 10 + 26) {
                ch_str = String.fromCharCode(65 + num - 10);
            }
            else {
                ch_str = String.fromCharCode(97 + num - 10 - 26);
            }
            rt_str += ch_str;
        }
        return rt_str;
    }
    
    /**
     * 根据guid删除alert-div元素
     * @param Id guid
     */
    function delAlertDivById(Id) {
        //等待layer自动处理好
        setTimeout(function () {
            var $alert_div = $(".alert-div[data-guid='" + Id + "']");
            if ($alert_div.length == 0) {
                clearInterval(id);
            }
            else {
                $alert_div.remove();
            }
        }, 1200);
        //上面这个延时数值很重要,因为layer没提供close的回调,所以只能如此等待
    }
    
    /**
     * 关闭弹层相关的清理工作
     * @param that myAlert对象
     */
    function closeWork(that) {
        clearTimeout(that.autoCloseTimerId);
        layer.close(that.winId);
        delAlertDivById(that.uniqueId);
    }
    
    /**
     * 根据myAlert对象组件出jQuery弹窗对象
     * @param that myAlert对象
     */
    function buildPopup(that) {
        var baseHtmlStr = "
                        <div class='alert-div'>
                            <div class='title'>
                                <i class='fa icon'></i>
                                <span class='text'></span>
                                <i class='fa fa-close icon-close'></i>
                            </div>
                            <div class='content text-center'>
                                <i class='fa fa-5x icon'></i>
                                <span class='text1'></span>
                                <span class='text2'></span>
                            </div>
                            <div class='control text-center'>
                                <div class='btn btn-base'></div>
                            </div>
                        </div>
                    ";
        var $baseJq = $(baseHtmlStr);
    
        $baseJq.attr("data-guid", that.uniqueId);
    
        $baseJq.children(".title").children(".icon").addClass(that.titleIcon);
        $baseJq.children(".content").children(".icon").addClass(that.contentIcon);
        $baseJq.children(".title").children(".text").text(that.title);
        $baseJq.children(".content").children(".text1").text(that.text);
        $baseJq.children(".content").children(".text2").text(that.summary);
        $baseJq.children(".control").children(".btn-base").text(that.okBtnText);
    
        $baseJq.children(".title").children(".icon-close").click(that.canClose ? that.closeBtnFunction : function () { });
        $baseJq.children(".control").children(".btn-base").click(that.okBtnFunction);
    
        return $baseJq;
    }
    
    /**
     * 根据配置对象对于myAlert对象进行配置
     * @param dstObj 目标对象,myAlert对象
     * @param cfgObj 配置对象
     */
    function defaultConfig(dstObj, cfgObj) {
        if (cfgObj == undefined) {
            cfgObj = new Object();
        }
    
        dstObj.uniqueId = cfgObj.uniqueId || getGuid32();
    
        dstObj.title = cfgObj.title || "提示";
        dstObj.text = cfgObj.text || "确认?";
        dstObj.summary = cfgObj.summary || "确认请按下方按钮";
        dstObj.okBtnText = cfgObj.okBtnText || "确认";
    
        dstObj.titleIcon = cfgObj.titleIcon || "fa-info-circle";
        dstObj.contentIcon = cfgObj.contentIcon || "fa-exclamation-circle";
    
        if (cfgObj.canClose == undefined) {
            dstObj.canClose = true;
        }
        else {
            dstObj.canClose = cfgObj.canClose;
        }
        dstObj.autoCloseTimer = cfgObj.autoCloseTimer || -1;
    
        dstObj.okBtnFunction = cfgObj.okBtnFunction || function () {
            closeWork(dstObj);
        };
        dstObj.closeBtnFunction = cfgObj.closeBtnFunction || function () {
            closeWork(dstObj);
        };
        dstObj.autoCloseTimerId = -1;
        dstObj.autoCloseFunction = cfgObj.autoCloseFunction || function () {
            closeWork(dstObj);
        };
    
        //存储layer返回的弹层id
        dstObj.winId = -1;
    }
    
    /**
     * myAlert对象构造函数
     * @param cfgObj myAlert配置对象
     */
    function myAlert(cfgObj) {
    
        defaultConfig(this, cfgObj);
    
        //弹出弹层方法
        this.show = function () {
            if ($(".alert-div[data-guid='" + this.uniqueId + "']").length > 0) {
                return;
            }
    
            var $baseJq = buildPopup(this);
    
            $("body").append($baseJq);
    
            /**
             * 实际弹窗部分
             */
            var $popup_dom = $baseJq;
            this.winId = layer.open({
                id: this.uniqueId,
                type: 1,
                closeBtn: 0,
                title: false,
                content: $popup_dom,
                area: [$popup_dom.width(), $popup_dom.height()]
            });
    
            if (this.canClose) {
                if (this.autoCloseTimer > -1) {
                    var that = this;
                    this.autoCloseTimerId = setTimeout(function () {
                        that.autoCloseFunction();
                    }, this.autoCloseTimer);
                }
            }
        };
    }
    .layui-layer {
        background-color: rgba(255, 255, 255, 0) !important;
    }
    
    .alert-div {
        position: relative;
        width: 740px;
        height: 480px;
        border: 1px solid #f2af6f;
        border-radius: 6px;
        font-family: 'Microsoft YaHei UI';
        margin: 0px;
        padding: 0px;
        background-color: white;
        overflow-y: hidden;
        overflow-x: hidden;
        display: none;
    }
    
        .alert-div .title {
            background: linear-gradient(to bottom, #f2af6f 10%, #f3a02c 90%);
            font-size: 48px;
            height: 70px;
        }
    
            .alert-div .title .icon {
                margin: 0px 0px 10px 14px;
            }
    
            .alert-div .title .text {
                position: absolute;
                top: 9px;
                left: 67px;
                font-size: 34px;
                font-weight: bold;
            }
    
            .alert-div .title .icon-close {
                margin: 8px 12px 10px 14px;
                float: right;
            }
    
        .alert-div .content {
            height: 270px;
            padding-top: 50px;
        }
    
            .alert-div .content .icon {
                display: block;
            }
    
            .alert-div .content .text1 {
                color: black;
                font-size: 38px;
                margin-top: 40px;
                display: block;
            }
    
            .alert-div .content .text2 {
                color: #444;
                font-size: 24px;
                margin-top: 10px;
                display: block;
            }
    
        .alert-div .control {
            height: 140px;
        }
    
            .alert-div .control .btn-base {
                border: solid 1px #f2af6f;
                border-radius: 6px;
                font-size: 36px;
                font-weight: bold;
                padding-left: 40px;
                padding-right: 40px;
                margin-top: 35px;
                background: linear-gradient(to bottom, #f2af6f 10%, #f3a02c 90%);
            }
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="Content/bootstrap.css" />
        <link rel="stylesheet" href="Content/font-awesome.css" />
        <link rel="stylesheet" href="layer/skin/default/layer.css" />
        <link rel="stylesheet" href="Content/trml-myAlert.css" />
    </head>
    <body>
        <div class="container" style="margin-top: 20px;">
            <input type="button" class="btn btn-primary btn-test1" value="测试1" />
        </div>
        <script src="Scripts/jquery-3.1.1.js"></script>
        <script src="Scripts/bootstrap.js"></script>
        <script src="layer/layer.js"></script>
        <script src="Scripts/trml-myAlert-jq.js"></script>
        <script>
            $(".btn-test1").click(function () {
                var tstAlert = new myAlert({
                    uniqueId: "gushihao",
                    okBtnFunction: function () {
                        alert("哈哈");
                        closeWork(tstAlert);
                    },
                    autoCloseTimer: 10000,
                    autoCloseFunction: function () {
                        alert("我要自动关闭了!");
                        closeWork(tstAlert);
                    },
                    closeBtnFunction: function () {
                        alert("你点击了关闭按钮");
                        closeWork(tstAlert);
                    }
                });
                tstAlert.show();
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    ArrayList用法
    MessageBox
    将文本文件导入Sql数据库
    在桌面和菜单中添加快捷方式
    泡沫排序
    Making use of localized variables in javascript.
    Remove double empty lines in Visual Studio 2012
    Using Operations Manager Connectors
    Clear SharePoint Designer cache
    Programmatically set navigation settings in SharePoint 2013
  • 原文地址:https://www.cnblogs.com/jimaojin/p/7488347.html
Copyright © 2011-2022 走看看