いまやWEB制作に欠かせないモーダルウィンドウですが、既存のプラグインを利用すると「やりたい表現があるけど、どこをどうカスタマイズすればいいかわからない…」という状況に陥ってしまった経験がある方も多いのではないでしょうか。
今回は、カスタマイズしやすい簡単なモーダルウィンドウの作り方をご紹介します。
デモはこちら。
必要なコードは以下です。(jQueryの読み込み必須)
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- モーダルウィンドウを開くボタン --> <p><a href="#modal01" class="modalOpen">Open</a></p> <!-- モーダルウィンドウ --> <div class="modal" id="modal01"> <!-- モーダルウィンドウが開いている時のオーバーレイ --> <div class="overLay modalClose"></div> <!-- モーダルウィンドウの中身 --> <div class="inner"> モーダルウィンドウ <a href="" class="modalClose">Close</a> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
body { position:relative; } /* モーダルウィンドウのスタイル */ .modal { position:absolute; width:100%; height:100vh; top:0; left:0; display:none; } /* オーバーレイのスタイル */ .overLay { position:absolute; top:0; left:0; background:rgba(200,200,200,0.9); width:100%; height:100vh; z-index:10; } /* モーダルウィンドウの中身のスタイル */ .modal .inner { position:absolute; z-index:11; top:50%; left:50%; transform:translate(-50%,-50%); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function(){ // モーダルウィンドウが開くときの処理 $(".modalOpen").click(function(){ var navClass = $(this).attr("class"), href = $(this).attr("href"); $(href).fadeIn(); $(this).addClass("open"); return false; }); // モーダルウィンドウが閉じるときの処理 $(".modalClose").click(function(){ $(this).parents(".modal").fadeOut(); $(".modalOpen").removeClass("open"); return false; }); }); |
「モーダルウィンドウを開くボタン」のリンク先は、モーダルのidと合わせると開きます。
デモ内にある「上からOpen」のようなモーダルウィンドウ開閉時のアニメーションも、以下のように記述を追加することで簡単に実装できます。
css
1 2 3 4 5 6 7 8 |
@keyframes modal{ 0% {top:-100%} 100% {top:50%} } @keyframes modalClose { 0% {top:50%} 100% {top:100%} } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
$(function(){ $(".modalOpen").click(function(){ var navClass = $(this).attr("class"), href = $(this).attr("href"); $(href).fadeIn(); $(this).addClass("open"); //cssアニメーションの記述を追加する $(href).children(".inner").css("animation","modal 0.5s forwards"); return false; }); $(".modalClose").click(function(){ $(this).parents(".modal").fadeOut(); $(".modalOpen").removeClass("open"); //cssアニメーションの記述を追加する $(this).parents(".modal").children(".inner").css("animation","modalClose 0.5s forwards"); return false; }); }); |
cssアニメーションと組み合わせると多彩な表現が可能です。ぜひオリジナルのモーダルウィンドウを作ってみてください!