elderModal

概述

2026年3月7日为访客系统制作门卫关闭访单的功能时需要一个自定义的模态窗提示用户进行操作

源码

将下面代码保存为文件 ElderModal.js，然后需要的文件中引用即可

(function (window, document) {
    'use strict';

    // 1. 动态注入 CSS 样式的方法
    function injectStyles() {
        var styleId = 'elder-modal-style-tag';
        // 如果页面中已经有这个样式标签，则不再重复插入
        if (document.getElementById(styleId)) {
            return;
        }

        var style = document.createElement('style');
        style.id = styleId;
        style.type = 'text/css';

        // 适老版 CSS 样式字符串拼接 (严格遵守 ES5)
        var cssString = 
            ".elder-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 9999; display: table; font-family: 'Microsoft YaHei', sans-serif; }" +
            ".elder-modal-container { display: table-cell; vertical-align: middle; text-align: center; }" +
            ".elder-modal-box { display: inline-block; background-color: #FFFFFF; border: 4px solid #333333; border-radius: 12px; width: 80%; max-width: 500px; padding: 40px 30px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }" +
            ".elder-modal-message { font-size: 28px; font-weight: bold; color: #000000; line-height: 1.6; margin-bottom: 40px; word-wrap: break-word; }" +
            ".elder-modal-actions { display: block; }" +
            ".elder-modal-btn { display: inline-block; font-size: 24px; font-weight: bold; padding: 15px 40px; margin: 0 15px; border-radius: 8px; cursor: pointer; text-decoration: none; outline: none; }" +
            ".elder-modal-btn-confirm { background-color: #005A9C; color: #FFFFFF; border: 3px solid #005A9C; }" +
            ".elder-modal-btn-cancel { background-color: #FFFFFF; color: #333333; border: 3px solid #333333; }" +
            ".elder-modal-btn-confirm:active { background-color: #003F6E; border-color: #003F6E; }" +
            ".elder-modal-btn-cancel:active { background-color: #E0E0E0; }";

        // 兼容旧版 IE 的样式注入方式
        if (style.styleSheet) {
            style.styleSheet.cssText = cssString;
        } else {
            style.appendChild(document.createTextNode(cssString));
        }

        document.getElementsByTagName('head')[0].appendChild(style);
    }

    // 2. 定义模态窗构造函数
    function ElderModal(options) {
        // 每次实例化时检查并注入样式
        injectStyles();

        // 参数初始化
        options = options || {};
        this.message = options.message || '您确定要执行此操作吗？';
        this.confirmText = options.confirmText || '确 定';
        this.cancelText = options.cancelText || '取 消';
        this.onConfirm = typeof options.onConfirm === 'function' ? options.onConfirm : function () {};
        this.onCancel = typeof options.onCancel === 'function' ? options.onCancel : function () {};

        this.overlayElement = null;
    }

    // 3. 原型方法
    ElderModal.prototype = {
        constructor: ElderModal,

        show: function () {
            var self = this;

            // 如果已经存在弹窗，先清理掉旧的
            this.close();

            // 创建遮罩层
            this.overlayElement = document.createElement('div');
            this.overlayElement.className = 'elder-modal-overlay';

            // HTML 结构
            var htmlString = 
                '<div class="elder-modal-container">' +
                    '<div class="elder-modal-box">' +
                        '<div class="elder-modal-message">' + this.message + '</div>' +
                        '<div class="elder-modal-actions">' +
                            '<button class="elder-modal-btn elder-modal-btn-cancel" id="elder-cancel-btn">' + this.cancelText + '</button>' +
                            '<button class="elder-modal-btn elder-modal-btn-confirm" id="elder-confirm-btn">' + this.confirmText + '</button>' +
                        '</div>' +
                    '</div>' +
                '</div>';
            
            this.overlayElement.innerHTML = htmlString;
            document.body.appendChild(this.overlayElement);

            // 绑定事件
            var confirmBtn = document.getElementById('elder-confirm-btn');
            var cancelBtn = document.getElementById('elder-cancel-btn');

            confirmBtn.onclick = function () {
                self.close();
                self.onConfirm();
            };

            cancelBtn.onclick = function () {
                self.close();
                self.onCancel();
            };
        },

        close: function () {
            if (this.overlayElement && this.overlayElement.parentNode) {
                this.overlayElement.parentNode.removeChild(this.overlayElement);
                this.overlayElement = null;
            }
        }
    };

    // 4. 将构造函数暴露给全局对象
    window.ElderModal = ElderModal;

})(window, document);

调用案例

如下面代码，不需要手动添加销毁 modal 的代码

<script src="path/to/ElderModal.js"></script>

<script>
    // 直接调用，样式会自动生成
    var modal = new ElderModal({
        message: '您的手机号码填写有误，请重新检查。',
        confirmText: '去修改',
        cancelText: '暂不修改',
        onConfirm: function() {
            // 确定逻辑
        }
    });
    
    modal.show();
</script>