如何区分并自定义同一页面中bootbox.alert与bootbox.confirm模态框样式？

嘿，我来帮你搞定这个给不同Bootbox模态框加不同样式的问题！你之前用find().css()的方式虽然能改样式，但要区分多个模态框的话就太繁琐了，其实Bootbox本身就支持直接给模态框指定自定义类名，这才是更高效的做法，下面给你两种实用方案：

方案一：初始化时直接指定自定义类名（推荐） #

Bootbox的弹窗配置项里有个className参数，你可以给每个弹窗单独设置独一无二的类名，之后直接用CSS写对应样式就行，不用再用JS去逐个修改DOM样式。

示例代码： #

// 自定义警告弹窗
var alertModal = bootbox.alert({
  title: "<i class='fa fa-exclamation-circle' style='font-size: 20px; color: white'></i> Alert",
  message: "Please select Patient from Queue",
  className: "custom-alert-modal" // 这里指定自定义类名
});

// 自定义确认弹窗
var confirmModal = bootbox.confirm({
  title: "Confirm Action",
  message: "Are you sure you want to proceed?",
  className: "custom-confirm-modal" // 另一个自定义类名
});

对应的CSS样式： #

/* 自定义警告弹窗的头部样式 */
.custom-alert-modal .modal-header {
  background-color: red;
  color: white;
}

/* 自定义警告弹窗的底部样式 */
.custom-alert-modal .modal-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
}

/* 自定义确认弹窗的头部样式 */
.custom-confirm-modal .modal-header {
  background-color: #007bff;
  color: white;
}

方案二：给已创建的弹窗添加自定义类 #

如果你已经写了不少弹窗代码，不想大改初始化逻辑，也可以在弹窗创建后给它添加自定义类，再用CSS控制样式，比直接用css()方法更易维护：

示例代码： #

var alertModal = bootbox.alert({
  title: "<i class='fa fa-exclamation-circle' style='font-size: 20px; color: white'></i> Alert",
  message: "Please select Patient from Queue"
});

// 添加自定义类
alertModal.addClass("custom-alert-modal");

// 之后就可以用CSS写样式了，和方案一的CSS一样

这样一来，每个弹窗都有自己专属的样式类，你想怎么改样式都可以，不用再重复写一堆find().css()的代码，是不是方便多了？

内容的提问来源于stack exchange，提问作者Sameel