Bootstrap是一个非常流行的前端框架，它提供了响应式设计、移动友好以及酷炫的界面设计。个人喜欢它，因为它已经是一个完全成熟的框架，并且有一个非常活跃的社区来提供帮助。最近，在使用 Bootstrap 的 Modal 功能时，写了很多JavaScript代码，并在这个过程中编写了一段小代码，用于在 JavaScript 中动态创建和显示 Bootstrap Modal，包括动态的标题、正文和按钮。认为这可能对其他人也有用，尽管大多数人可能已经在代码库中有了类似的代码，但分享出来总是有益的。
JavaScript实现：
定义了一个名为 BstrapModal 的类，它有一个构造函数，接受三个参数：title、body 和 buttons。
参数说明：
按钮对象应该包含以下属性：
例如，一个按钮对象可能如下所示：
{
Value: "CLOSE",
Css: "btn-danger",
Callback: function(event) {
// 关闭按钮点击逻辑
}
}
BstrapModal.Close 函数用于关闭 Modal 并从文档中删除它。可以根据自己的需求扩展这个类，例如，为不同类型的Bootstrap按钮创建一个枚举并放入构造函数中，或者扩展 show 函数，使其能够获取 Modal 类型，如大或小等。
以下是 BstrapModal 类的实现代码：
var BstrapModal = function(title, body, buttons) {
var title = title || "Lorem Ipsum History",
body = body || "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
buttons = buttons || [{ Value: "CLOSE", Css: "btn-primary", Callback: function(event) { BstrapModal.Close(); } }];
var GetModalStructure = function() {
var that = this;
that.Id = BstrapModal.Id = Math.random();
var buttonshtml = "";
for (var i = 0; i < buttons.length; i++) {
buttonshtml += "";
}
return "";
}();
BstrapModal.Delete = function() {
var modals = document.getElementsByName("dynamiccustommodal");
if (modals.length > 0) document.body.removeChild(modals[0]);
};
BstrapModal.Close = function() {
$(document.getElementById(BstrapModal.Id)).modal('hide');
BstrapModal.Delete();
};
this.Show = function() {
BstrapModal.Delete();
document.body.appendChild($(GetModalStructure)[0]);
var btns = document.querySelectorAll("button[name='btn" + BstrapModal.Id + "']");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", buttons[i].Callback || BstrapModal.Close);
}
$(document.getElementById(BstrapModal.Id)).modal('show');
};
};
使用方式：
new BstrapModal().Show();
这将显示一个默认的 Modal，因为没有传递任何标题、正文和按钮数组，所以它将使用所有默认值。