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();
2022-05-26
Javascript
蔡大卫,广东揭阳人氏,现居深圳,从事互联网行业,专注程序编码工作20年。目前正在创业。
发布评论