Javascript(jQuery)でBootstrap4のモーダルを表示・非表示

jQueryでbootstrap4のモーダルを表示・非表示する方法。

表示


  1. $('#my_modal').modal();



非表示


  1. $('#my_modal').modal('hide');




全体のサンプル


  1. <html lang="ja">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  5.     <title>modal</title>
  6. </head>
  7. <body>
  8.     <button id="modal_show">表示</button>
  9.     <div class="modal" tabindex="-1" role="dialog" id="my_modal">
  10.         <div class="modal-dialog" role="document">
  11.             <div class="modal-content">
  12.                 <div class="modal-header">
  13.                     <h5 class="modal-title">モーダルのタイトル</h5>
  14.                     <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
  15.                         <span aria-hidden="true">×</span>
  16.                     </button>
  17.                 </div><!-- /.modal-header -->
  18.                 <div class="modal-body">
  19.                     <p>サンプル</p>
  20.                 </div><!-- /.modal-body -->
  21.                 <div class="modal-footer">
  22.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる(デフォルト)</button>
  23.                 <button type="button" class="btn btn-primary" id="modal_close">閉じる(スクリプト)</button>
  24.                 </div><!-- /.modal-footer -->
  25.             </div><!-- /.modal-content -->
  26.         </div><!-- /.modal-dialog -->
  27.     </div><!-- /.modal -->
  28. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  29. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  30. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  31. <script>
  32. $(function() {
  33.     $('#modal_show').on('click', function() {
  34.         $('#my_modal').modal();
  35.     });
  36.     $('#modal_close').on('click', function() {
  37.         $('#my_modal').modal('hide');
  38.     });
  39. })
  40. </script>
  41. </body>
  42. </html>




【参考URL】
How to hide Bootstrap modal with javascript?

関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ