今回は、初心者でも超簡単にできてしまう、CSSとjQueryで背景固定のモーダルウィンドウを自作する方法を解説していきます。
背景が固定され、モーダルウィンドウ内では、要素が多くなると縦にスクロールできるような仕様にしています!
早速、実際の動作を確認して、コードを見ていきましょう!
×0.5倍にして見て下さい!
コードの解説を入れていきます。
HTML:モーダルのボタンと中身を作る
HTMLでモーダルを開くボタンと閉じるボタン、閉じる背景などを作っていきます。
jQueryを使うのに、HTMLで id を使わないのは、閉じるところを複数作るため class にしています。
また、モーダル内の閉じるバツボタンはフォントオーサムを使っているので、headタグで読み込んでいない人は下記のソースをhead内に貼り付けておきましょう。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
HTMLのソースは下記のようになります。
<div class="modal-btn js-modal-open">開く</div>
<div class="js-modal">
<div class="modal-bg js-modal-close"></div>
<div class="modal-wrap">
<span class="js-modal-close modal-close-btn"><i class="fas fa-times-circle"></i></span>
<div class="modal-contents">
<img src="img-1.jpg" alt="">
<p class="sample-text">ここにモーダルの中身が入ります。</p>
<p class="sample-text">ここにモーダルの中身が入ります。</p>
<p class="sample-text">ここにモーダルの中身が入ります。</p>
<p class="sample-text">ここにモーダルの中身が入ります。</p>
<p class="sample-text">ここにモーダルの中身が入ります。</p>
<div class="modal-btn js-modal-close">閉じる</div>
</div>
</div>
</div>
CSS:ボタンの装飾と黒い背景を作る
CSSの装飾自体は、そこまで難しくありません。
モーダルを初期状態では、非表示にしておきます。
* {
margin: 0;
padding: 0;
}
.modal-btn {
cursor: pointer;
text-align: center;
width: 300px;
margin: 70px auto;
padding: 20px 70px;
border: 1px solid #000;
background: #000;
color: #fff;
transition: 0.4s ease-in-out;
}
.modal-btn:hover {
background: #fff;
color: #000;
}
.modal-close-btn i {
position: absolute;
top: 30px;
right: 30px;
font-size: 40px;
cursor: pointer;
}
.js-modal {
display: none;
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
.modal-bg {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
cursor: pointer;
}
.modal-wrap {
position: fixed;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
padding: 30px;
overflow-y: scroll;
transform: translate(-50%, -50%);
background: #fff;
}
jQuery:CDNを読み込まないとjQueryは使えない
フォントオーサムと同様に、jQueryを読み込んでから出ないと、jQueryは動きませんので、読み込んでいない人は、下記のソースをhead内かbodyの直前に貼り付けておきましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
jQueryを読み込むタグの後に今からjQueryを記述していきます。
HTML内にjQueryを記述する人は、scriptタグ内に記述。
別にjsファイルを作る方は、scriptタグでHTMLにjsファイルを読み込んでおきましょう。
僕の場合は、commons.jsというファイルを作成したので、jQueryを読み込むタグの下に、下記のソースを入れます。
<script src="commons.js"></script>
commons.jsの中に書くソースは下のようになります。
$(function () {
$(".js-modal-open").click(function () {
$("html,body").css("overflow", "hidden");
$(".js-modal").fadeIn();
return false;
});
$(".js-modal-close").click(function () {
$("html,body").removeAttr("style");
$(".js-modal").fadeOut();
return false;
});
});
いたってシンプルな構成で、ボタンクリックしたらモーダルがフェイドイン・フェイドアウトさせます。
背景を固定させるには、jQueryでoverflow : hidden;を指定してあげれば、完成です。
まとめ:モーダルは誰でも簡単にできる
いかがでしたか?
今回のソースコードは比較的簡単に実装することができ、jsやjQuery初心者でも取り組みやすいので、挑戦してみて下さいね!