意外とシンプル！モーダルウィンドウを実装してみよう

動きのあるウェブサイト制作を目指して、クリックすると背景が暗転してコンテンツが浮かび上がるモーダルウィンドウを実装しよう。

モーダルウィンドウとは
早速実例
1. ちょっと補足

モーダルウィンドウとは

モーダル（modal）ウィンドウは、元のウィンドウの上に別枠で表示されるウィンドウのこと。
主な目的としては以下の２つ。
・重要な情報への注意を喚起
・必要な入力がなされるまで、アプリケーションの実行をブロック

元のウィンドウの上にあるボタンなどをクリックすることで、見てほしいコンテンツを表示し、表示している間は、元のウィンドウの操作はできなくなるという訳。

早速実例

専門家でない限りコピペで済むのが一番！ということで、定番のjQueryを使ってみよう。
サイト上にボタンを設置して、それをクリックすることで、画像や文章などのモーダルウィンドウが立ち上がる。
せっかくなので複数のモーダルウィンドウを設置するパターンにしてみた。

【HTML】

1<button id="openModal">クリックしてね！その1</button>
2 
3<!-- モーダルエリアその１ここから -->
4<section id="modalArea" class="modalArea">
5  <div id="modalBg" class="modalBg"></div>
6  <div class="modalWrapper">
7    <div class="modalContents">
8      <h1>モーダルコンテンツその１</h1>
9      <p>モーダルコンテンツその１の内容がここに表示されます。</p>
10    </div>
11    <div id="closeModal" class="closeModal">
12      ×
13    </div>
14  </div>
15</section>
16<!-- モーダルエリアその１ここまで -->
17 
18<button id="openModal02">クリックしてね！その2</button>
19 
20<!-- モーダルエリアここから -->
21<section id="modalArea02" class="modalArea">
22  <div id="modalBg" class="modalBg"></div>
23  <div class="modalWrapper">
24    <div class="modalContents">
25      <h1>モーダルコンテンツその２</h1>
26      <p>モーダルコンテンツその２の内容がここに表示されます。</p>
27    </div>
28    <div id="closeModal" class="closeModal">
29      ×
30    </div>
31  </div>
32</section>
33<!-- モーダルエリアここまで -->

【java】

1<!-- ↓jqueryの読み込み -->
2<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
3 
4<!-- ↓１つめのモーダルウィンドウ -->
5<script type="text/javascript">
6$(function () {
7  $('#openModal').click(function(){
8      $('#modalArea').fadeIn();
9  });
10  $('#closeModal , #modalBg').click(function(){
11    $('#modalArea').fadeOut();
12  });
13});
14</script>
15 
16<!-- ↓２つめのモーダルウィンドウ -->
17<script type="text/javascript">
18$(function () {
19  $('#openModal02').click(function(){
20      $('#modalArea02').fadeIn();
21  });
22  $('#closeModal , #modalBg').click(function(){
23    $('#modalArea02').fadeOut();
24  });
25});
26</script>

【CSS】

1.modalArea {
2  display: none;
3  position: fixed;
4  z-index: 10; 
5  top: 0;
6  left: 0;
7  width: 100%;
8  height: 100%;
9}
10 
11.modalBg {
12  width: 100%;
13  height: 100%;
14  background-color: rgba(30,30,30,0.9);
15}
16 
17.modalWrapper {
18  position: absolute;
19  top: 50%;
20  left: 50%;
21  transform:translate(-50%,-50%);
22  width: 70%;
23  max-width: 500px;
24  padding: 10px 30px;
25  background-color: #fff;
26}
27 
28.closeModal {
29  position: absolute;
30  top: 0.5rem;
31  right: 1rem;
32  cursor: pointer;
33}

ちょっと補足

モーダルウィンドウが立ち上がるのはボタンなので、デフォルトだと背景や罫線が入ってしまう。
ということでボタンをリセットしたいなら以下のCSSを追加しよう。

1button{
2background-color: transparent;
3border: none;
4cursor: pointer;
5outline: none;
6padding: 0;
7appearance: none;
8}