bootstrap4でModal(モーダル)を使う方法です！
公式を見ると詳細などもわかりますが、ここでは要点だけまとめてます。
Bootstrap4のModal（モーダル）って？
開いている画面の中に小画面が表れて、閉じるなどの操作をするまで親画面がさわれなくなる画面です。
親も小画面も触れるのはモーダレス画面になります。
デモはこちら！
サンプル
標準のモーダルと、背景を押しても消えないモーダルと、中央寄せのモーダルを用意しました。
デモを確認してもらえればわかりますが、
標準モーダルでは背景を押すと消えますが、2番目は消えないようになってます。
3番目のモーダルはモーダル自体が左右上下中央に来るようになっています。
<html>
<head>
<title>bootstrap4 | modal test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
</script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="navbar-brand">bootstrap4 モーダルテスト</div>
</nav>
<div class="container mt-4">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#testModal">
標準のモーダル表示!
</button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#testStaticModal">
背景を押しても消えないモーダル！
</button>
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModalCenter">
中央寄せのモーダル！
</button>
<!--default modal-->
<div class="modal fade" id="testModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">ここにタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
モーダルの内容をいろいろ書く！
</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>
<!--static modal-->
<div class="modal fade" data-backdrop="static" id="testStaticModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">ここにタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
背景をクリックしても消えないモーダル！
</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>
<!--middle center modal-->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">中央寄せ</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
中央寄せのモーダルです！
</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>
</div>
</body>
</html>
使い方
bootstrap.min.css,jquery3のjs,bootstrap.min.jsを読み込んでます。
ボタンなどのタグに data-toggle=”modal” data-target=”#[モーダルのid]” という感じで
２つの属性を付けておきます。
どちらかがなかったり、idをミスしたりしたら動かないので注意です！
data-toggle属性はmodal固定で書いておきます。
data-target属性に指定したIDがモーダルと紐づいているので、タグで書いたモーダルと同じものを指定しましょう。
上記に気を付けて、サンプルと同じように書けば動きます！🥳
背景を押しても消えないようにするには？
作っているモーダルタグにdata-backdrop=”static”を指定しておけば消えずに残ってくれます！
絶対に確認してほしいところとかで使えそうですね💡
<!--static modal-->
<div class="modal fade" data-backdrop="static" id="testStaticModal" tabindex="-1" role="dialog" aria-hidden="true">
・・・
中央寄せにするには？
modal-dialogクラスと同じ位置にmodal-dialog-centeredを指定して中央表示されます。
中央の方がみやすいですよね。基本入れといていいかもですね。
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
・・・
javascriptで制御する
javascriptで、〜秒後にとか、ajaxの処理が終わったら閉じるみたいな
時には下記を使えばいいです！
表示するには？
モーダルに指定しているIDをjqueryでセレクトして、modal関数にshowを渡してあげます。
$('#myModal').modal('show')
非表示にするには？
同じようにして、下記で非表示になります。
$('#myModal').modal('hide')
モーダルの表示状態切替
トグルは現在の表示と逆の表示になりますね。
・表示されてたら非表示
・非表示なら表示
$('#myModal').modal('toggle')
おわりに
今回はbootstrap4のモーダルで、使いそうなとこだけピックアップしてみました。
その他にも公式ドキュメントに詳しく書いているので見てみてください！
コメント