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

Question

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

下拉菜单

点击启动演示模式后

Answer 1

很难在没有看到任何代码的情况下查明您遇到问题的确切位置...但是根据您的描述，您似乎已将模式 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>

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

Bootstrap-4 modal not showing when triggered from inside a dropdown

html

css

modal-dialog

drop-down-menu

bootstrap-4