从下拉列表中触发时，Bootstrap-4 模态不显示

Posted 2023-03-05

【中文标题】从下拉列表中触发时，Bootstrap-4 模态不显示

【英文标题】：Bootstrap-4 modal not showing when triggered from inside a dropdown

【发布时间】：2019-12-12 02:38:18

【问题描述】：

我使用了一个下拉菜单，其中一个下拉项目应该打开一个模式。但它没有显示。当我使用普通按钮而不是下拉按钮访问模式时，它可以正常工作。我认为它在下拉窗口中打开。

下拉菜单

点击启动演示模式后

【参考方案1】：

很难在没有看到任何代码的情况下确定您遇到问题的确切位置...但根据您的描述，您似乎已将 Modal id=myModal 放在下拉列表中...何时应该在外面下拉列表；

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#" data-toggle="modal" data-target="#myModal">Open Modal</a>
    </div>
  </div>
</div>



<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

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