本文实例为大家分享了集合Bootstrap自定义confirm的具体代码，供大家参考，具体内容如下
效果
这里写图片描述
js端
var Common = {
confirm:function(params){
var model = $("#common_confirm_model");
model.find(".title").html(params.title)
model.find(".message").html(params.message)
$("#common_confirm_btn").click()
//每次都将监听先关闭，防止
在网页开发中，Bootstrap是一个非常流行的前端框架，它提供了丰富的组件和样式，使得开发者能够快速构建响应式和移动优先的网站。本实例主要探讨如何利用Bootstrap来实现自定义的confirm提示效果，即模拟系统默认的确认对话框，但具有更高的可定制性。
我们来看代码结构。这段代码分为JavaScript部分和HTML部分。在JavaScript中，定义了一个名为`Common`的对象，其中包含一个名为`confirm`的方法。这个方法接受一个参数`params`，该参数包含了对话框的标题（`title`）、消息（`message`）以及一个回调函数`operate`，用于处理用户点击确认或取消后的逻辑。
```javascript
var Common = {
confirm: function(params) {
var model = $("#common_confirm_model");
model.find(".title").html(params.title);
model.find(".message").html(params.message);
// 触发弹窗显示
$("#common_confirm_btn").click();
// 防止事件冒泡和多次监听
model.find(".cancel").die("click");
model.find(".ok").die("click");
model.find(".ok").live("click", function() {
params.operate(true);
});
model.find(".cancel").live("click", function() {
params.operate(false);
});
}
};
```
在HTML部分，我们创建了一个隐藏的按钮`#common_confirm_btn`，其作用是触发Bootstrap模态框（Modal）的显示。接着，定义了一个模态框`#common_confirm_model`，包含对话框的标题、消息、确认和取消按钮。`data-toggle`和`data-target`属性用于绑定按钮与模态框。
```html
<input type="hidden" id="common_confirm_btn" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#common_confirm_model">
<div id="common_confirm_model" class="modal">
<!-- Modal content -->
</div>
```
当调用`Common.confirm`时，传入的参数会被用来填充模态框的内容，并设置确认和取消按钮的事件监听。例如：
```javascript
Common.confirm({
title: "标题",
message: "内容",
operate: function(result) {
if (result) {
// 用户点击确认后的处理
} else {
// 用户点击取消后的处理
}
}
});
```
这段代码的关键在于使用jQuery的`die()`和`live()`方法来管理事件监听。`die()`方法移除指定元素的事件监听器，而`live()`方法添加事件监听器，确保在动态添加的元素上也能生效。然而，`live()`方法在jQuery 1.7之后已被弃用，推荐使用`on()`和`off()`替代。因此，更现代的写法可能是：
```javascript
model.find(".cancel").off("click").on("click", function() {
params.operate(false);
});
model.find(".ok").off("click").on("click", function() {
params.operate(true);
});
```
这样，我们就创建了一个自定义的Bootstrap confirm对话框，可以根据实际需求自由定制外观和功能，同时避免了多次监听的问题，提高了代码的健壮性。这个实现方式对于那些希望在不依赖额外库的情况下增强Bootstrap功能的开发者来说，是一个实用的技巧。
