Jquery Bootstrapのモーダル・ダイアログのサンプル

2022年10月21日

環境
Bootstrap3.3.6
Jquery 1.11.3
Windows 10 Home 64bit
Google Chrome　106.0.5249.119

書式
1.モーダル・ダイアログを開く項目の設定
data-toggle=”modal”
data-target=”モーダルダイアログのセレクター名”

2.レイアウト区分項目
modal-header , modal-body , modal-footer

3.モーダル・ダイアログを閉じます
「data-dismiss=”modal”」を指定します

使用例

<!DOCTYPE html>
<html>
<head>

<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body>

<!-- ボタン -->       
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#cft">表示</button>
 
<!-- モーダルダイアログ -->
<div class="modal fade" id="cft" tabindex="-1">
   <!--クラスmodal-dialog を指定 -->
  <div class="modal-dialog">
    <div class="modal-content">
      
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
      <h4 class="modal-title">モーダル　サンプル</h4>
      </div>
      
      <div class="modal-body">
      test 1233 modal body
      </div>
      
      <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
      <button type="button" class="btn btn-primary">保存</button>
      </div>
        
    </div><!-- modal-content -->
  </div><!-- modal-dialog -->
</div><!-- modal fade -->
</body>
</html>

結果
「表示」ボタンを押すと、モーダルダイアログが表示されます。

jQuery

Posted by arkgame

関連記事: