Bootstrap Modal

ライブラリ読み込み

jquery参照

<script
src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>

bootstrapのjs参照

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>

bootstrap参照

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
>

モーダル起動ボタン

<button type="button"
 class="btn btn-primary"
 data-toggle="modal"
 data-target="#exampleModal"
>
 Launch demo modal
</button>

モーダル

<div class="modal fade"
 id="exampleModal"
 tabindex="-1" role="dialog"
 aria-labelledby="exampleModalLabel"
 aria-hidden="true"
>
 <div class="modal-dialog" role="document">
  <div class="modal-content">
   
   <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     <span aria-hidden="true">&times;
    </button>
   </div>
   
   <div class="modal-body text-center">
    
    
   </div>
   
   <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
    <button type="button" class="btn btn-primary">保存する</button>
   </div>
  </div>
 </div>
</div>