【jQuery】スクロールできるモーダルウィンドウを作成する方法

「【jQuery】スクロールできるモーダルウィンドウを作成する方法」のアイキャッチ画像

タグ

お松お松
こんにちは管理人ことお松(@matsu_2708)です。今回はjQueryを使ってスクロールできるモーダルウィンドウの実装を紹介します

 

こんな方に読んでほしい!

✔️jQueryを使ってモーダルウィンドウを作成したい方

 

 

jQuery、CSSを使ってスクロールできるモーダルウィンドウを作成する方法

早速、コードを書いていきます。

 

See the Pen
JjEVggV
by takuya_matsumoto2708 (@matsutaku2708)
on CodePen.

 

↑こんな感じ

 

コピペすればすぐできるとかと思います。

 

それでは詳しい内容について詳細を掘り下げていきます。

 

HTML(スクロールできるモーダルウィンドウ)

<!-- クリックイベント発生場所に#modal-openをつける -->
<button class="modal-open" id="modal-open">ここをクリック</button>

<!-- ここからモーダルエリア -->
<div class="modal-body" id="modal-body">
  <div class="modal-close" id="modal-close"></div>
  <div class="modal-contents" id="modal-contents">
    <h2>タイトルを入力</h2>
    <p>テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力</p>
    <div class="modal-peke" id="modal-peke">×</div>
  </div>
</div>
<!-- ここからモーダルエリア -->

<!-- jQueryの読み込み -->
<script src="jquery-3.5.1.min.js"></script>

 

注意するポイントは2つです

 

タス

クロールモーダルウィンドウHTML注意点

  • jQueryで動作させるときはidを使用する
  • id=”modal-open”、id=”modal-close, modal-peke”で開閉する

 

✔️jQueryで動作させるときはidを使用する

jQueryに限らずJavaScriptもですが、CSSとごっちゃにならないためにもclassとidを使い分けて書いた方がいいです。

コードが長くなってくると本当にわけがわからなくなるので。

 

✔️id=”modal-open”、id=”modal-close, modal-peke”で開閉する

タイトルにある通り、id=”modal-open”, id=”modal-close, modal-peke”をクリックすることでモーダルの開閉を行います。

ここをクリックしたらモーダルが表示されるようにしたい」と思う位置にmodal-open

ここをクリックしたらモーダルを閉じたい」と思う位置にmodal-close, modal-pekeを配置してください。

ちなみに、modal-pekeは×がクリックされた時に閉じるようで用意しました。同じidを2つ利用はできないので

 

CSS(スクロールできるモーダルウィンドウ)

/* -----ボタンの装飾----- */

.modal-open {
width: 200px;
margin: 0auto;
line-height: 40px;
border: 1pxsolid#000;
text-align: center;
cursor: pointer;
}

.modal-open:hover {
background: #000;
color: #fff;
}

/* ---------------------- */



/* ---ここからモーダル--- */

.modal-body {
display: none;
position: fixed;
z-index: 10; /* ←他より数字を大きくする */
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.modal-close {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
cursor: pointer;
}

.modal-contents {
position: absolute;
top: calc(50% - 120px); /* ←中央にする(height/2)+(padding/2) */
left: calc(50% - 170px); /* ←中央にする(width/2)+(padding/2) */
height: 200px;
width: 300px;
background: #fff;
text-align: center;
padding: 20px;
}

.modal-peke {
position: absolute;
top: 1rem;
right: 1.2rem;
cursor: pointer;
}

/* ---------------------- */
モーダルようで用意したsection(class=”modal-body”)をあらかじめdisplay: none で非表示にしておきます。
その後、jQueryでsection(class=”modal-body”)を表示させたり、非表示にさせたりします。

クロールモーダルウィンドウCSS注意点

  • モーダル用のセクションをdisplay:noneで非表示にする

 

✔️モーダル用のセクションをdisplay:noneで非表示にする

モーダル表示させる箇所(class=”modal-body”)にあらかじめdisplay: none を用いて非表示にさせておきます。

modal-openがクリックされた場合、非表示になっていたモーダルボデー(class=”modal-body”)が表示される指示をこれからjQueryに記述していきます。

 

jQuery(スクロールできるモーダルウィンドウ)

$(function () {
  $('#modal-open').click(function(){
    $('#modal-body').fadeIn();
    $('body').css('overflow','hidden');
    $('#modal-contents').css('overflow', 'auto');
  });
  $('#modal-close, #modal-peke').click(function(){
    $('#modal-body').fadeOut();
    $('body').css('overflow','auto');
  });
});

 

jQuery自体は短い記述ですみました。

ポイントは下記3つです。

 

スクロールモーダルウィンドウjQuery注意点

  • bodyをスクロールできないようにする
  • モーダルのコンテンツにoverflow: autoをかける

 

✔️bodyをスクロールできないようにする

position: fixed はbody の上に何かを表示させている状態です。

なので、基本はbodyがスクロールされてしまうという原理です。

それをbodyをスクロールできないようにし、$('body').css('overflow','hidden');

モーダルウィンドウをスクロールできるようにする指示を記述します。$('#modal-contents').css('overflow', 'auto');

 

※モーダルを閉じた後、bodyがスクロールできるよう$('body').css('overflow','auto');の指示を忘れないように書きます。

 

✔️モーダルのコンテンツにoverflow: autoをかける

上記で述べた通りですね。

モーダルウィンドウをスクロールできるようにする指示を記述します。$('#modal-contents').css('overflow', 'auto');

 

jQuery、CSSを使ってスクロールできるモーダルウィンドウを作成する方法まとめ

そんなに複雑なコードを書かなくてもモーダルウィンドウは表示できたりします。

それから、jQueryやJavaScriptに関してですが私自身、急に「モーダルウィンドウ作って」と言われても作れません。

作り方をどこかに記述しておき、それを見ながら思い出すようにしています。

覚えるのではなく、やり方を何かにまとめておくことが大切かと思います。