Javascript 封装一个对象，调用 Bootstrap 5 中 modal 组件

var ui = {
    modal: {
        open: function (settings) {
            //settings结构
            //{
            //  id:"xxxx",  //可选
            //  title: "",  //窗口标题
            //  size: "", //modal-fullscreen全屏, modal-fullscreen-sm-down小屏时全屏, modal-xl超大， modal-lg大， modal-md中 modal-sm小
            //  body: "", //body的html代码
            //  closeText: "", 关闭按钮的文本, 如果值为$NONE$，表示不显示底部的关闭按钮. 默认值为 Close
            //  okText: "", 确定按钮的文本，如果为$NONE$，表示不显示底部的确认按钮。默认值为 Okay
            //  static: false, //是否开启模态窗口，如果为true，表示背景不可点击，必须关闭窗口后才能继续。
            //  show: function(evt, settings){}, //窗口打开时马上执行。在窗口css动画开始前就执行。
            //  shown: function(evt, settings){}, //窗口显示完毕后执行
            //  hide : function(evt, settings){}, //窗口隐藏时执行
            //  hidden : function(evt, settings){} //窗口隐藏完毕后执行
            //  destroyOnClose : true  //窗口关闭后即销毁dom对象
            //}
            var id = settings["id"] || "modal_" + parseInt(Math.random() * 100000).toString();
            settings["id"] = id;
            var modalElem = document.getElementById(id);
            if (modalElem) {
                return ui.modal.getInstance(id);
            }
            var html = [];
            html.push("<div class=\"modal-dialog " + (settings["size"] || "") + "\">");
            html.push("<div class=\"modal-content\">");
            html.push("<div class=\"modal-header\">");
            html.push("<h5 class=\"modal-title\" id=\"" + id + "Label\">" + (settings["title"] || "无标题") + "</h5>");
            html.push("<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>");
            html.push("</div>");
            html.push("<div class=\"modal-body\">");
            html.push(settings["body"] || "...");
            html.push("</div>");
            html.push("<div class=\"modal-footer\">");
            if (settings["closeText"] != "$NONE$") {
                html.push("<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">" + (settings["closeText"] || "关闭") + "</button>");
            }
            if (settings["okText"] != "$NONE$") {
                html.push("<button type=\"button\" class=\"btn btn-primary\">" + (settings["okText"] || "好的") + "</button>");
            }
            html.push("</div>");
            html.push("</div>");
            html.push("</div>");

            var wrap = document.createElement("div");
            wrap.setAttribute("class", "modal fade");
            if (settings["static"]) {
                wrap.setAttribute("data-bs-backdrop", "static");
            }
            wrap.setAttribute("id", id);
            wrap.setAttribute("tabindex", -1);
            wrap.setAttribute("aria-labelledby", id + "Label");
            wrap.setAttribute("aria-hidden", true);
            wrap.innerHTML = html.join("");
            document.body.appendChild(wrap);

            if (settings["ok"]) {
                var okBtn = document.querySelector("#" + id + " .modal-footer button.btn-primary");
                okBtn.addEventListener("click", function (evt) {
                    settings["ok"](evt, settings);
                });
            }


            var myModalEl = document.getElementById(id);
            if (settings["show"]) {
                myModalEl.addEventListener('show.bs.modal', function (evt) { settings["show"](evt, settings); });
            }
            if (settings["shown"]) {
                myModalEl.addEventListener('shown.bs.modal', function (evt) { settings["shown"](evt, settings); });
            }
            if (settings["hide"]) {
                myModalEl.addEventListener('hide.bs.modal', function (evt) { settings["hide"](evt, settings); });
            }
            if (settings["hidden"]) {
                myModalEl.addEventListener('hidden.bs.modal', function (evt) { settings["hidden"](evt, settings); });
            }
            if (settings.destroyOnClose) {                
                ui.modal.remove(id);
            }
            return ui.modal.getInstance(id);
        },
        getInstance: function (id) {
            var myModalEl = document.querySelector('#' + id);
            var modal = bootstrap.Modal.getOrCreateInstance(myModalEl);
            return modal;
        },
        remove: function (id, cb) {
            document.getElementById(id).addEventListener('hidden.bs.modal', function (evt) {
                evt.target.remove();
                cb && cb();
            });
        },
        close: function (id, cb) {
            ui.modal.remove(id, cb);
            var modal = ui.modal.getInstance(id);
            modal.hide();                       
        }
    },
    loading: {
        show: function (txt) {
            $("#loading").removeClass("d-none");
            $("#loading div span").html(txt);
        },
        hide: function () {
            $("#loading div span").html("");
            $("#loading").addClass("d-none");
        }
    }
}

调用方法：

var opts = {
                id : "query_ip_dialog",
                title: "查询IP地址：" + ip,
                static: 0,                
                okText: "$NONE$",
                closeText: "关闭",
                destroyOnClose: true,
                body: "查询中...",
                show: function (evt, opts) {
                    $.get("/Admin/Other/GetIpLocation?ip=" + encodeURIComponent(ip), function (x) {
                        $("#query_ip_dialog .modal-body").html(x);
                    });
                }
            };
            ui.modal.open(opts).show();