基于JavaScript实现带显示持续时间的Alert

一、效果展示

默认样式，持续1.5秒后消失

持续5秒后消失

使用随机主题

使用静态样式

二、源代码

Html代码

<html>
<head>
    <title>JunAlert</title>
    <meta charset="UTF-8">
    <script src="./jun-alert/jun-alert.min.js"></script>
    <link href="./jun-alert/jun-alert.min.css" rel="stylesheet">
</head>
<body>
<style>
    ul {
        font-size: 0.9rem;
    }

    ul li {
        margin-bottom: 1rem;
    }

    button {
        margin-left: 10px;
    }
</style>

<ul>
    <li>默认样式
        <button onclick="test[0]()">弹出</button>
    </li>
    <li>显示五秒
        <button onclick="test[1]()">弹出</button>
    </li>
    <li>随机主题
        <button onclick="test[2]()">弹出</button>
    </li>
</ul>
<hr>
<div style="width: 300px; margin: auto">
    <div class="jun-alert jun-alert-primary">静态默认样式 primary</div>
    <div class="jun-alert jun-alert-secondary">静态 secondary</div>
    <div class="jun-alert jun-alert-success">静态 success</div>
    <div class="jun-alert jun-alert-danger">静态 danger</div>
    <div class="jun-alert jun-alert-warning">静态 warning</div>
    <div class="jun-alert jun-alert-info">静态 info</div>
    <div class="jun-alert jun-alert-dark">静态 dark</div>
</div>

<script>

    var test = [
        function () {
            JunAlert.show('欢迎使用JunAlert,默认样式')
        },
        function () {
            JunAlert.show('欢迎使用JunAlert,持续五秒消失', 0, timeout = 5000)
        },
        function () {
            JunAlert.show('欢迎使用JunAlert, 随机样式', Math.round(Math.random() * 10) % 7)
        },
    ]

</script>

</body>
</html>

JavaScript代码

(function (global) {
    "use strict";

    const JunAlert = {
        /**
         * 显示主题样式
         */
        _theme: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark'],

        /**
         * 初始化DOM
         * @private
         */
        _initDom: function () {
            if (!this._layerModal) {
                this._layerModal = document.createElement('div')
                this._layerModal.setAttribute('class', 'jun-alert-modal')
                document.body.append(this._layerModal)
            }
        },
        /**
         * 显示 Alert
         * @param msg:要现实的消息
         * @param type:显示样式类型, 整数 0-6
         * @param timeout:显示时间 ms
         */
        show: function (msg, type = 0, timeout = 1500) {
            var _this = this
            _this._initDom()

            var containerModal = document.createElement('div')
            containerModal.setAttribute('class', 'jun-alert jun-alert-' + (_this._theme[type] ? _this._theme[type] : _this._theme[0]))
            containerModal.innerText = msg
            _this._layerModal.append(containerModal)

            setTimeout(function () {
                containerModal.remove()
                if (!_this._layerModal.childElementCount) {
                    _this._layerModal.remove()
                    _this._layerModal = null
                }
            }, timeout)
        }
    }

    //兼容CommonJs规范
    if (typeof module !== 'undefined' && module.exports) module.exports = JunAlert;

    //兼容AMD/CMD规范
    if (typeof define === 'function') define(function () {
        return JunAlert;
    });

    // 注册到全局
    global.JunAlert = JunAlert

})(this);

CSS代码

.jun-alert-modal {
    width: 30%;
    position: absolute;
    padding: 20px 0px;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    max-height: 80%;
    overflow-y: auto;
}

.jun-alert-modal-sm {
    width: 25%;
}

.jun-alert-modal-lg {
    width: 75%;
}

.jun-alert {
    font-size: .85rem;
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem
}

.jun-alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff
}

.jun-alert-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db
}

.jun-alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb
}

.jun-alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb
}

.jun-alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba
}

.jun-alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb
}

.jun-alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca
}

三、使用方式

引入js和css

<script src="jun-alert.min.js"></script>
<link href="jun-alert.min.css" rel="stylesheet">

调用方法 JunAlert.show(msg, type, timeout); 说明如下：

msg：要现实的文本（string）

type：主题样式，范围0-6，参数可选（number）

timeout：持续时间，当设置持续时间后，type必须设置样式（number）

JunAlert.show('欢迎使用JunAlert，默认样式');

JunAlert.show('欢迎使用JunAlert，持续无秒', 0, 5000);

JunAlert.show('欢迎使用JunAlert，默认主题 primary', 0); 

JunAlert.show('欢迎使用JunAlert，设置主题 secondary', 1);

JunAlert.show('欢迎使用JunAlert，设置主题 success', 2);

JunAlert.show('欢迎使用JunAlert，设置主题 danger', 3);

JunAlert.show('欢迎使用JunAlert，设置主题 warning', 4);

JunAlert.show('欢迎使用JunAlert，设置主题 info', 5);

JunAlert.show('欢迎使用JunAlert，设置主题 dark', 6);

四、源码下载

jun-alert源代码下载

基于JavaScript实现带显示持续时间的Alert

一、效果展示

二、源代码

三、使用方式

四、源码下载

猜你喜欢