Modal.confirm footer添加自定义按钮
时间: 2024-10-16 18:08:20 浏览: 40
Modal组件中的confirm弹框通常包含默认的确认和取消按钮,如果你想在Bootstrap的Modal确认框底部添加自定义的按钮,可以使用HTML和JavaScript或者相关的前端框架如Ant Design或Element UI。这里提供一种基本的做法:
1. 使用HTML结构创建新的按钮元素,并添加到modal的footer部分:
```html
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- 其他内容 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<!-- 这里添加自定义按钮 -->
<button type="button" class="btn btn-primary custom-btn">自定义确认</button>
</div>
</div>
</div>
</div>
```
2. 如果需要动态操作或绑定事件,可以在JavaScript中处理:
```javascript
// 获取模态元素
var modal = document.getElementById('myModal');
// 自定义确认按钮点击事件
var customBtn = modal.querySelector('.custom-btn');
customBtn.addEventListener('click', function() {
// 在这里编写确认动作,比如关闭模态并发送数据等
});
```
记得给`custom-btn`类添加适当的样式,使其看起来像其他Bootstrap按钮。
阅读全文