html - 让 Bootstrap 5 模态和背景占据父容器的宽度和高度，而不是全屏

Question

有没有办法限制 Bootstrap 5 模式对话框和背景的大小？

example下面占据了 100% 的屏幕，是否可以使其仅覆盖父 main 容器？

<main class="container-fluid pt-4 px-4" style="height: 400px">
                <!-- Button trigger modal -->
                <button
                    type="button"
                    class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#exampleModal"
                >
                    Launch demo modal
                </button>

                <!-- Modal -->
                <div
                    class="modal fade hide"
                    data-backdrop="false"
                    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>
            </main>

我添加了下面的 CSS，但不起作用。

.modal-dialog, .modal-backdrop {
/* supposed to take the height and width of parent container */
       height: 100% !important; 
       width: 100% !important;
 }

它是如何工作的:

我想要什么(或预期的行为):

Answer 1

模态组件会自动添加背景元素(在 .modal 的父级之外)，因此，如果您希望模态完全包含在父级内，请首先使用 data-bs-backdrop="false" 禁用背景。 .
默认情况下.modal有position: fixed因此它是相对于视口(viewport)渲染的，而不考虑其父元素。可以通过给( main )父级 position: relative; 来覆盖此行为。并给出 .modal child position: absolute; 。您还可以给.modal一个rgba()背景颜色仅在父级中模拟封装的静态背景(单击静态背景不会关闭模式)。
要使模式在父级中居中，请添加 .modal-dialog-centered到.modal-dialog .
在下面的代码片段中，我给出了 main和.modal背景更清晰地展示:

main {
  position: relative;
  background: #EEE;
}

main .modal {
  position: absolute;
  background: rgba(0, 100, 0, 0.35);
}

<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b7acabacaab9a898edf6eaf6eb" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-2">
      sidebar
    </div>
    <div class="col-10">
      <div class="row">
        <nav class="navbar bg-light">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
          </div>
        </nav>
      </div>
      <div class="row">
        <main class="container-fluid pt-4 px-4" style="height: 400px">
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Launch demo modal
          </button>

          <!-- Modal -->
          <div class="modal fade hide" data-bs-backdrop="false" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <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 flex-grow-1">...</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>
        </main>

      </div>
    </div>
  </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424514a564a57" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>