《bootstrap确认提示框》

在Web开发中，当需要用户进行关键操作的确认时，使用Bootstrap创建一个美观且功能完善的确认提示框是一个很好的解决方案。借助Bootstrap框架提供的样式和组件，我们可以快速构建出交互性强的确认提示框，确保用户明确知晓即将执行的操作并给予确认或取消。

一、利用Bootstrap模态框实现

这是最常用的一种方式。在HTML中定义模态框结构：

html
<!-- 模态框 --></p>

<div class="modal fade" id="confirmModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">确认操作</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        确定要执行此操作吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="confirmBtn">确定</button>
      </div>
    </div>
  </div>
</div>

<p>

然后通过JavaScript来控制模态框的显示与隐藏以及处理确定按钮的逻辑：

javascript
// 显示模态框
function showConfirm() {
    $('#confirmModal').modal('show');
}</p>

<p>// 给确定按钮绑定事件
$('#confirmBtn').click(function(){
    // 执行确定后的操作，例如发送ajax请求等
    alert('确定操作');
    $('#confirmModal').modal('hide');
});

二、使用Bootstrap - popover插件改造

虽然popover主要是用于显示提示信息，但也可以稍作改造实现简单的确认提示效果。先给触发元素添加属性：

html <button type="button" class="btn btn-danger" id="example" data-container="body" data-toggle="popover" data-placement="top" data-content="<button type='button' class='btn btn-secondary'>取消</button><button type='button' class='btn btn-primary confirmPopover'>确定</button>">点击我</button>

再用JavaScript初始化popover并处理其中的按钮事件：

javascript
$('[data-toggle="popover"]').popover({
    html : true,
    trigger: 'manual'
}).on("mouseenter", function () {
    var <em>this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function () {
        $(</em>this).popover('hide');
    });
}).on("mouseleave", function () {
    var <em>this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(</em>this).popover("hide");
        }
    }, 300);
});</p>

<p>$(document).on('click','.confirmPopover',function(){
    alert('确定操作');
})

以上两种思路都可以满足创建Bootstrap确认提示框的需求，开发者可以根据实际场景选择合适的方式。

(牛站网络)