如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框

Bootstrap的modal组件可以帮助我们创建自定义的alert、confirm和modal对话框。下面是使用Bootstrap的modal组件自定义alert、confirm和modal对话框的完整攻略：

准备工作

在进行下一步之前，需确保已经引入了Bootstrap框架。如未引入，可以在head标签中添加以下代码：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

自定义alert对话框

使用Bootstrap的modal组件，可以非常便捷地自定义alert对话框。示例如下：

function showAlert(message) {
  let modal = '<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true">' +
    '<div class="modal-dialog" role="document">' +
    '<div class="modal-content">' +
    '<div class="modal-header">' +
    '<h5 class="modal-title" id="alertModalLabel">提示</h5>' +
    '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
    '<span aria-hidden="true">&times;</span>' +
    '</button>' +
    '</div>' +
    '<div class="modal-body">' + message + '</div>' +
    '<div class="modal-footer">' +
    '<button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>';

  $('body').append(modal);
  $('#alertModal').modal();
};

函数showAlert接受一个参数message，即为需要显示的提示信息。在函数内部，使用Bootstrap的modal组件创建一个基本的alert对话框，并将message作为对话框的内容。当函数被调用时，动态地添加alert对话框节点到body中，并弹出alert对话框。

自定义confirm对话框

使用Bootstrap的modal组件，也可以很方便地自定义confirm对话框。示例如下：

function showConfirm(message, confirmCallback, cancelCallback) {
  let confirmModal = '<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">' +
    '<div class="modal-dialog" role="document">' +
    '<div class="modal-content">' +
    '<div class="modal-header">' +
    '<h5 class="modal-title" id="confirmModalLabel">提示</h5>' +
    '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
    '<span aria-hidden="true">&times;</span>' +
    '</button>' +
    '</div>' +
    '<div class="modal-body">' + message + '</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>';

  $('body').append(confirmModal);
  $('#confirmModal').modal();

  $('#confirmBtn').on('click', function () {
    if (typeof confirmCallback == 'function') {
      confirmCallback();
    }
    $('#confirmModal').modal('hide');
  });

  $('#confirmModal').on('hidden.bs.modal', function () {
    $('#confirmModal').remove();
  });

  $('#confirmModal .close').on('click', function () {
    if (typeof cancelCallback == 'function') {
      cancelCallback();
    }
  });
};

函数showConfirm接受三个参数，message为需要显示的提示信息，confirmCallback为确认后的回调函数，cancelCallback为取消后的回调函数。在函数内部，使用Bootstrap的modal组件创建一个基本的confirm对话框。当函数被调用时，动态地添加confirm对话框节点到body中，并弹出confirm对话框。同时，在用户点击确认或取消按钮或关闭模态框之后，该对话框会被移除，并且触发对应的回调函数。

自定义modal对话框

使用Bootstrap的modal组件，还可以定制各种modal对话框。示例如下：

<div class="modal fade" id="customModal" tabindex="-1" role="dialog" aria-labelledby="customModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="customModalLabel">自定义模态框</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
          <span aria-hidden="true">&times;</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">保存更改</button>
      </div>
    </div>
  </div>
</div>

在html中定义了一个div，id为customModal，即对应modal对话框的唯一标识符。此时模态框内容为空，可以根据需要添加任何需要的内容。

最后，当需要弹出自定义的modal对话框时，只需要调用以下代码即可：

$('#customModal').modal('show');

此时，自定义的modal对话框就会弹出来了。

完整的示例代码可以在以下CodePen链接中查看：https://codepen.io/yalong888/pen/zYOKRWO 。

阅读剩余 63%