どうも、ソエです!

今回は、モーダルウィンドウを作成していきます!

ポートフォリオで使ったものの、忘れてしまいそうなので書きました!

では、早速行きましょう!

の、前にサンプルはこちら!

HTMLのコード

<div class=”modal_open”>
クリックするとモーダルウィンドウが開きます。
</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などなくてもよいものは省略してます。

.hide{
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 open_btn = document.querySelector(“.modal_open”);
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などを使うと囲んだ中身も薄くなるし~で頭がごちゃごちゃ。
この背景と中身の関係さえ理解できれば、簡単なものだと思うので頑張ってコードを書いてみてください。


では、ご閲覧ありがとうございました。

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ JavaScript/

初心者がJavaScriptでモーダルウィンドウ!