模式從下拉菜單項

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