モーダルウィンドウを実装したいときにはプラグインを使うことも多いと思いますがモーダルウィンドウはプラグインを使わなくても比較的簡単に実装することができます。
僕もプラグインを使用していたことがありますがいざカスタマイズしたいときに修正しづらかったり要望どおりのオプションがなくて実装するのが大変だったりした経験があります。
その点、自分で実装すれば作り方や仕組みを理解しているのでカスタマイズがしやすいというメリットにもつながります。
モーダルウィンドウはどんなときに使う？
モーダルウィンドウは、ユーザーに見せたい情報やアクションをさせたいときに使うことが多いです。
またモーダルウィンドウが開くとユーザーが閉じるアクションをしなければモーダルウィンドウが閉じないのでユーザーの行動を制限することができます。
例えば登録をさせたいときや重要な情報を見せたいときにモーダルウィンドウを開きます。
最近では、モーダルウィンドウを使わないようなデザインも増えてきていますがまだまだモーダルウィンドウを使ったサイトは多いと思います。
モーダルウィンドウは、基本的にjsで作成します。
モーダルウィンドウのサンプルソース
HTML
<div class="modal-wrap">
<!-- ↓モーダルウィンドウを開くための要素 -->
<div class="modal-btn"><button>モーダルを開く</button></div>
<!-- ↓モーダルウィンドウ -->
<div class="modal">
<div>
<h1>モーダルタイトル</h1>
<p>モーダル内容</p>
</div>
</div>
</div>
<!-- ↓モーダルウィンドウの黒背景 -->
<div class="overlay"></div>htmlは、モーダルウィンドウを押して開かせるためのボタンやテキストなどの要素と開いたときのモーダルウィンドウのコンテンツと黒背景などの要素が必要になります。
CSS
.overlay{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.modal{
opacity: 0;
position: fixed;
top: 0;
left: 0;
z-index:2;
width: 100%;
box-sizing:border-box;
padding:10px;
transform:scale(0,0);
transition:all .2s ease-in;
}
.modal.active{
opacity:1;
transform:scale(1,1);
}
.modal > div{
padding: 16px;
background: #fff;
text-align: center;
}
.modal > div > h1{
margin-bottom: 22px;
color: #333;
font-size: 20px;
font-weight: bold;
}
.modal-btn button{
cursor: pointer;
box-shadow: none;
border: none;
border-radius: 4px;
background: #ccc;
padding: 10px;
color: #fff;
}モーダルウィンドウのコンテンツは、transform:scale(0,0);によって縮小され見えない状態になっています。
モーダルウィンドウにactiveクラスが付くことによってモーダルウィンドウが元の状態に拡大され表示されます。
jQuery
jQuery(function(){
jQuery('.modal-btn > button').click(function(){
jQuery('.modal-btn').next('.modal').addClass('active');
jQuery('.overlay').show();
});
jQuery('.overlay').click(function(){
jQuery('.modal').removeClass('active');
jQuery('.overlay').hide();
});
}); 上記の処理としては、ボタンやテキストをクリックしたときにクラス名（active）が付きモーダルウィンドウが開きます。
次にdisplay: none;にされている黒背景がshowによって表示されます。
黒背景（overlay）がクリックされると クラス名（active） を削除してモーダルウィンドウが閉じ display: block;にされている黒背景がhideによって非表示になります。
最後に
どうでしょうか？
モーダルウィンドウはプラグインを使わなくても比較的簡単に作ることができることが分かってもらえたと思います。
プラグインを使う方が早いという人もいると思いますが一からモーダルウィンドウを作ってしまえば使いまわしたり修正したり改良したりするのも簡単にできるし便利だと思います。
jQueryの勉強におすすめの書籍
jQuery 仕事の現場でサッと使える! デザイン教科書
コメント