模式从下拉菜单项

Question

我试图从bootstrap beta 4.0中的下拉菜单项中执行模式。它似乎没有工作。我在页面上的其他模式上使用了相同的格式，他们正在工作。

  <li class="nav-item dropdown"> 
     <a href="#insurance-head-section" class="nav-link dropdown-toggle" data-toggle="dropdown">Insurance</a> 
     <div class="dropdown-menu"> 
      <a href="" class="dropdown-item">New Patient</a> 
      <a href="" class="dropdown-item">Established Patient</a> 
      <a href="#response" 
      class="dropdown-item" 
      data-toggle="modal" data-target="response">Responsibilities</a> 
      <a href="" class="dropdown-item">link 4</a> 
     </div> 
     </li> 

模态低于：

<div class="modal" id="response"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <h5 class="modal-title"></h5> 
     <button class="close" data-dismiss="modal">&times;</button> 
    </div> 
    <div class="modal-body"> 
     <div class="list-group"> 
     <div class="d-flex w-100 justify-content-between"> 
      <h6>Responsibilities</h6> 

     </div> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn btn-secondary" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

你缺少一个哈希之前，请data-target

<a href="#response" class="dropdown-item" data-toggle="modal" data-target="#response">Responsibilities</a> 

你会看到，需要在这里他们的文档中：

https://getbootstrap.com/docs/4.0/components/modal/#modal-components

这里是一个codepen一个链接，这是工作：

https://codepen.io/egerrard/pen/jGzjOz