Bootstrap 5下拉菜单触发Modal仅显示灰色背景无内容如何解决

问题原因 #

你将Modal组件的DOM结构写在了下拉菜单（.dropdown-menu）的内部，导致Modal显示被限制：

• Bootstrap的.dropdown-menu默认有overflow: hidden规则，同时属于独立的堆叠上下文，z-index层级低于全局Modal遮罩层，内部的Modal会被父容器裁剪、层级不足无法显示，仅能看到全局的灰色遮罩
• 点击下拉菜单项触发Modal时，下拉菜单会默认收起，也会连带隐藏内部的Modal节点

解决方法 #

将Modal的完整DOM结构从下拉菜单中移出，放在和下拉组件同级的位置，或者页面底部</body>标签之前即可，触发按钮的data-bs-target="#test"和Modal的id对应关系无需修改。

修改后的正确代码示例：

<div class="container">
  <div class="row">
    <div class="inline-block">
      <div class="dropdown">
        <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-primary">Dropdown</button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li>
            <button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#test">
              Launch demo modal
            </button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Modal移到下拉菜单外部 -->
<div class="modal fade" id="test" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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>

内容的提问来源于stack exchange，提问作者Jaroslav Klimčík