どうも、ソエです！
今回は、モーダルウィンドウを作成していきます！
ポートフォリオで使ったものの、忘れてしまいそうなので書きました！
では、早速行きましょう！
の、前にサンプルはこちら！
クリックするとモーダルウィンドウが開きます。
モーダルウィンドウです。
閉じるボタンか、ウィンドウ以外の場所を押すと閉じます。
HTMLのコード
クリックするとモーダルウィンドウが開きます。
</div>
<div class=”hide modal_content”>
<div class=”modal_bg”></div>
<div class=”modal_p”>
<p>モーダルウィンドウです。閉じるボタンか、ウィンドウ以外の場所を押すと閉じます。</p>
<div class=”modal_hide”>閉じる</div>
</div>
</div>
簡単に言えば、
modal_openがクリックするボタン、
modal_contentがモーダルウィンドウそのもの、
modal_bgがモーダルウィンドウを開いたときの背景
modal_pがモーダルウィンドウの中身
modal_hideがモーダルウィンドウを閉じるボタン
という役割になっています。
<div class=”modal_open”>をimgタグに変えて、画像にしたりしても面白そうですね。
<div class=”modal_bg”></div>は本当に背景の役割をしているため、modal_pとは切り離します。
同じ階層なのでどうやって背景を下にしているのか、それはCSSで分かります！
HTMLはここまで。次にCSSを見ていきます。
CSSのコード
marginやpadding、backgroundcolorなどなくてもよいものは省略してます。
display:none;
}
.modal_bg{
position: fixed;
z-index: 2;
background: rgba(0, 0, 0, .5);
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.modal_p{
z-index:3;
position: fixed;
margin:auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
}
hideは完全に隠す用のclassなので、displayだけつけます。
modal_bgとmodal_pは、z-indexを指定して重なりを決めてます。
z-indexのおかげで、modal_pが一番上に来るようになってます。
z-indexが何なのか分からない方は、調べてみて下さい。
modal_pやmodal_bgはpositionをfixedにして、画面上の位置を固定させます。
fixedを使っているので、topやleftを書いて配置を決めます。
今回は中央寄せしたいので、topやleftを全て0にしてmarginをautoにして中央寄せさせました。
modal_pはwidthやheightを指定すると、どうしてもはみ出た部分があるかもしれません。
なので、overflow-yをscrollにしておき、はみ出た部分もスクロールで見せるようにしておきます。
背景や閉じるボタンなどクリックできるところはcursolをpointerに変えて、クリックできるぞ、とユーザーに分からせます。
CSSはここまで。次に、モーダルウィンドの中でも（この記事で）一番重要であるJavaScriptを見ていきます。
JavaScriptのコード
let hide_btn = document.querySelector(“.modal_hide”);
let content = document.querySelector(“.modal_content”);
let bg = document.querySelector(“.modal_bg”);
open_btn.addEventListener(“click”,function(){
content.classList.remove(“hide”);
});
close_btn.addEventListener(“click”,function(){
content.classList.add(“hide”);
});
bg.addEventListener(“click”,function(){
content.classList.add(“hide”);
});
今回はclickしたらhideを消すか、つけるかの操作だけです。
addEventListenerでイベント操作（クリックの判断操作）、
classList.addでclassを付ける、
classList.removeでclassを消す。
大まかな動きは、こんな感じです。
最初、modal_contentにhideを付けてたのは、この操作をするためだったりします。
まあ、JavaScriptでCSSの操作もできるのでclassを付けなくてもいいんですけどね・・・
分かりやすいほうがいいってことで、個人で判断していただければ、と思います。
終わりに
以上で、モーダルウィンドウの説明やら解説やらを終わります。
モーダルウィンドウの背景が少々理解が難しいと、私は思いました。
背景なので、囲んでbackgroundをつければいい～なんて思っていたりしました。
でも囲んだとき、opacityなどを使うと囲んだ中身も薄くなるし～で頭がごちゃごちゃ。
この背景と中身の関係さえ理解できれば、簡単なものだと思うので頑張ってコードを書いてみてください。
では、ご閲覧ありがとうございました。
