bootstrap5中模态框的用法 以及按钮传递数据给模态框

Bootstrap 5 modal（模态框）有多种用法和选项，下面列举了一些常见的用法：

基本模态框：一个简单的模态框，包含标题、内容和关闭按钮。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

大小模态框：可以设置模态框的大小，通过修改 modal-dialog 类的大小来实现。

<div class="modal-dialog modal-lg">
  ...
</div>
<div class="modal-dialog modal-sm">
  ...
</div>

滚动模态框：当内容过长时，模态框可以滚动显示。

<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

居中模态框：默认情况下，模态框会垂直居中显示在屏幕中央。

<div class="modal-dialog modal-dialog-centered">
  ...
</div>

模态框事件：可以使用 JavaScript 事件来处理模态框的各种状态。

$('#myModal').on('shown.bs.modal', function () {
  // do something...
})

这些是Bootstrap 5模态框的一些常见用法和选项，你可以根据自己的需求进行修改和扩展。

---

如果按钮上有一些参数要传递给模态框要怎么写?

按钮：

要传递一个id的值

 <button class="btn btn-sm btn-info " data-bs-toggle="modal" data-bs-target="#checkModal"
                            data-id="{{ one.id }}" data-title="{{ one.operationResource_no }}">审核
                    </button>

 模态框：

<div class="modal fade" id="checkModal" tabindex="-1"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title ">审核</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                这是内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success " id="confirmAddBtn">确认</button>
            </div>
        </div>
    </div>
</div>

JS：

这里的var id = button.data('id');就是获取参数值

  <script>
        $(document).ready(function () {


            $('[data-bs-target="#checkModal"]').on('click', function () {
                var button = $(this);
                var id = button.data('id');

                $.ajax({
                    method: 'GET',
                    url: url + '/' + id, // 替换为实际的获取工单信息的URL
                    success: function (response) {
                        if (response.result === 'success') {

                            fillFormWithData('infoForm', response.data);

                        } else {
                            // Display an error toastr notification
                            toastr.error('操作失败。' + response.message, 'Error');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error(error);
                    }
                });
            });


        });
    </script>