ドロップダウンメニューからのモーダル

Question

私は、ブートストラップベータ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