【jQuery】モーダルウィンドウの実装！プラグインなしで簡単に作れる方法

今回紹介するモーダルは、プラグインを使用せずに簡単なjQueryだけで実装しています。

以下のデモではCSSとjQueryは同じコードを使用していますが、モーダル内のコンテンツ量が「 少ない 」場合と「 多い 」場合でモーダルの表示位置が異なるのが特徴です。

デモ① モーダル内のコンテンツが少ない場合

See the Pen modal-window01_01_FIX by RECOOORD (@recooord) on CodePen.

モーダル内のコンテンツが少ない場合は、モーダルがウィンドウの上下中央に表示されます。
またモーダルを閉じるときは「CLOSE」ボタンを押すと閉じることができますし、モーダルの周りをクリックしても閉じることができます。

デモ② モーダル内のコンテンツが多い場合

See the Pen modal-window01_02_FIX by RECOOORD (@recooord) on CodePen.

モーダル内のコンテンツが多い場合、上下中央に表示されてしまうと上の文字が見切れてしまい、文章が読みづらくなりますので、上基点としてモーダルが表示されます。
下にはみ出した要素はスクロールすると閲覧することができます。

この2つのデモは同じコードを使用していますので、モーダル内のコンテンツが少ない場合でも、多い場合でも柔軟に利用することができます。
以下、今回使用したコードを掲載します。

HTML

<button class="open">OPEN</button>
<div class="container">
	<div class="overlay"></div>
	<div class="body">
		<div class="main">
			<div class="content">
				<p class="text"><span>Lorem ipsum dolor sit amet</span></p>
				<button class="close">CLOSE</button>
			</div>
		</div>
	</div>
</div>

CSS

button{
  max-width: 250px;
  width: 100%;
  height: 50px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #000;
  border: none;
  cursor: pointer;
}
button:hover{
  opacity: .7;
}
.open{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.container{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: auto;
}
.overlay{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
}
.body{
  display: table;
  width: 100%;
  height: 100%;
}
.main{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 25px;
}
.content{
  position: relative;
  display: inline-block;
  width: 70vw;
  background: #fff;
  padding: 25px;
  box-sizing: border-box;
}
.text{
  line-height: 1.8;
  padding: 0 0 25px;
}
span{
  display: inline-block;
  text-align: left;
}

jQuery

$(function(){  
  var a = $('.container'),
      b = $('.overlay'),
      c = $('.open'),
      d = $('.close'); 

  //OPENをクリックでモーダルを開く
  c.on('click',function(){
    a.fadeIn();
  });
  
  //CLOSEをクリックでモーダルを閉じる
  d.on('click',function(){
    a.fadeOut();
  });
  
  //モーダルの周りをクリックで閉じる
  b.on('click',function(){
    a.fadeOut();
  });
});

まとめ

いかがだったでしょうか。
プラグインを使わずとも、簡単にモーダルウィンドウを実装することができましたね。
モーダルウィンドウの実装はWebサイト制作では頻繁に扱いますので覚えておきましょう。