jQueryでモーダルウィンドウを作る方法を紹介します。
そもそもモーダルウィンドウとは、今見ている画面上に別ウィンドウとして表示されるもので、読ませたいメッセージの表示やローディング時などに使われます。
今回の解説で使う以下の例では、ボタンをクリックした際にモーダルウィンドウが表示するようにしました。
See the Pen
jquery-modal by KUBO (@KUBOGEN)
on CodePen.
実装方法は色々あると思いますが、今回解説する方法の考え方としては、開くボタンを押すとモーダルの要素にopenクラスをつけ、閉じるボタンを押すとopenクラスを外すという機能をjQueryで実装し、CSSでopenクラスがついている場合は表示、ついていない場合は非表示にするという方法です。
それではHTML、CSS、jQueryでそれぞれどのようにしているか順番に解説していきます。
HTMLで開くボタンとモーダルウィンドウを作る
HTMLですることは、モーダルウィンドウを開くためのボタンと、ボタンがクリックされた時に表示されるモーダルウィンドウの2つを作ることです。
<!-- ボタン -->
<a class=”modal-open”>クリックしてモーダルを開く</a>
<!-- モーダル -->
<div class=”modal-container”>
<div class=”modal”>
<p>ここにモーダルウィンドウの内容が入ります。「クリックしてモーダルウィンドウを閉じる」ボタンを押すとモーダルウィンドウは閉じます。</p>
<a class=”modal-close”>クリックしてモーダルウィンドウを閉じる</a>
</div>
</div>
今回のモーダルウィンドウはテキストと閉じるボタンの2つの要素のみ配置しています。
HTMLだけなのでテキストだけ表示されている状態ですが、装飾やボタンクリック時の動きは後から作っていくので、とりあえず気にしなくて大丈夫です。
CSSで見た目を整える
HTMLが書けたらCSSで見た目を整えていきます。
CSSですることは大きく3つ。モーダルウィンドウを開くボタンの装飾、モーダルウィンドウの表示部分、モーダルウィンドウの背景になる半透明レイヤーを作ることです。
/* ボタン */
a {
display: inline-block;
text-align: center;
color: white;
padding: 10px 30px;
box-sizing: border-box;
border-radius: 50px;
font-size: 14px;
}
a:hover {
cursor: pointer;
}
.modal-open {
background: teal;
}
.modal-close {
background: maroon;
}
/* モーダル背景 半透明レイヤー */
.modal-container {
width: 100%;
height: 100vh;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: .3s;
}
.modal-container.open {
opacity: 1;
visibility: visible;
}
/* モーダル */
.modal {
background: white;
padding: 50px;
box-sizing: border-box;
max-width: 500px;
border-radius: 20px;
}
.modal p {
font-size: 14px;
margin-bottom: 30px;
}
一番大枠となる「modal-container」が背景のレイヤーとなっており、画面いっぱいに広げて半透明にしております。
そしてflexプロパティを使ってモーダルウィンドウの表示部分を中央に配置しています。
なお、ボタンがクリックされた際にモーダルウィンドウを表示させたいので、最初は「opacity: 0;」「visibility: hidden;」で非表示にしておき、「.modal-container.open」には「opacity: 1;」「visibility: visible;」を指定して、openクラスがついたら表示するようにしておきましょう。
ここまできたら、モーダルウィンドウは見えない状態で、モーダルウィンドウを開くボタンだけ配置されている状態になると思います。
jQueryでクラスをつけたり外したりできるようにする
最後にjQueryでモーダルウィンドウにopenクラスをつけたり外したりする機能の実装をします。
$(function(){
// モーダルを開く
$(‘.modal-open’).click(function(){
$(‘.modal-container’).addClass(‘open’);
});
// モーダルを閉じる
$(‘.modal-close’).click(function(){
$(‘.modal-container’).removeClass(‘open’);
});
});
modal-openクラスがついたボタンをクリックした際はモーダルウィンドウにopenクラスを付与。逆にモーダルウィンドウに表示されている閉じるボタンがクリックされた際はopenクラスを外すという風にしています。
まとめ
jQueryでモーダルウィンドウを作る方法を解説しました。
jQueryでクラスをつけたり外したりする方法は、jQueryの記述が少なくて済むので、「CSSはある程度理解しているけどjQueryはまだよくわからない」という人にもできる方法です。
独学に限界を感じている方
jQueryは比較的覚えやすいと思うので、独学でも十分学べますが、JavaScriptの基本的なことから学びたいという人やjQueryの学習に行き詰まっている人は、プログラミングスクールで学ぶのもありです。
ただ、JavaScriptと併せて何を学べるかという点に注意して、どのスクールを選ぶか決めた方がいいです。
JavaScriptが学べるプログラミングスクールとその選び方は以下の記事で解説しています。
Leave a Comment