画像の拡大や、詳細情報を表示させるため、など、サイト上でポップアップ表示を使うことはよくあると思います。
ただ表示・非表示するだけなら簡単ですが、徐々にふわっと表示（フェードイン）させたり非表示（フェードアウト）させたり、となると、少し工夫が必要になることも。
そんな、フェードイン・フェードアウトするポップアップ（以下、勝手に「フェードポップ」と略します）を、CSSだけで行うパターンと、jQueryを併用するパターンでメモメモ。
ちなみに、今回はチェックボックスを使ってON/OFFを制御します。
CSSだけでフェードポップ
CSSだけでフェードポップする場合、display指定でのON/OFFではフェード処理ができないため、visibilityとopacityを使って再現します。
まずはHTML。
<label for="popup-checkbox">
<div class="popup-show">CSSでフェードポップ</div>
</label>
<input type="checkbox" id="popup-checkbox">
<div class="popup">
<label for="popup-checkbox" class="popup-hide">×</label>
<div class="popup-contents">ポップアップテスト</div>
</div>つづいてCSS。
#popup-checkbox {
display: none;
}
.popup {
background: #eee;
box-shadow: 0 0 0 9999px rgba(0,0,0,0.8);
height: 200px;
opacity: 0;
position: fixed;
transition: .8s;
visibility: hidden;
width: 300px;
}
#popup-checkbox:checked + .popup {
visibility: visible;
opacity: 1;
}
.popup-show {
border: solid 2px #000;
text-align: center;
width: 200px;
}
.popup-show:hover {
cursor: pointer;
}
.popup-hide {
color: #000;
padding: 0 10px;
position: absolute;
right: 0;
}
.popup-hide:hover {
cursor: pointer;
}
.popup-contents {
margin: 20px auto;
width: 90%;
}上記では、幅300px、高さ200pxのポップアップウィンドウを表示します。box-shadowでポップアップウィンドウの外を半透明の黒で覆っているので、一見モーダルウィンドウっぽいですが、一応ポップアップウィンドウです。
フェードする速度はtransitionで指定します。「.8s」と指定しているので、0.8秒かけてフェード処理してくれます。
jQueryを併用してフェードポップ
jQueryを併用してフェードポップする場合は、displayを使ってもフェード処理できるので、displayを使って再現します。
HTMLは「CSSだけでフェードポップ」と同一なので、ここでは省略します。
CSSは以下の通り。
#popup-checkbox {
display: none;
}
.popup {
background: #eee;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
height: 200px;
margin: auto;
position: fixed;
width: 300px;
}
.popup-show {
border: solid 2px #000;
text-align: center;
width: 200px;
}
.popup-show:hover {
cursor: pointer;
}
.popup-hide {
color: #000;
padding: 0 10px;
position: absolute;
right: 0;
}
.popup-hide:hover {
cursor: pointer;
}
.popup-contents {
margin: 20px auto;
width: 90%;
}
@keyframes display-show {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes display-hide {
from { opacity: 1; }
to {
display: none;
opacity: 0;
}
}つづいて、jQuery部分。
$(function(){
$('.popup').hide();
$('.popup-show').on('click', function(){
$('.popup').css({'display':'block', 'animation':'display-show .8s linear 0s forwards'});
});
$('.popup-hide').on('click', function(){
$('.popup').css('animation','display-hide .8s linear 0s forwards');
});
});CSSのみの処理と同様、幅300px、高さ200pxのポップアップウィンドウを表示します。
フェードする速度は、jQuery内のanimationで指定します。「.8s」と指定しているので、0.8秒かけてフェード処理してくれます。
表示するとき（show）はdisplayをblockにしてからopacityの値を徐々に変化させながら表示し、非表示にするとき（hide）はopacityの値を徐々に変化させてから、最後にdisplayをnoneにして完全に非表示にしています。
さいごに
どちらが楽に組めるのか、どちらがメンテナンス性に優れるのかは、その環境によって違うと思いますが、少なくともCSSだけで再現すれば、JavaScriptがOFFになっていても動作してくれることでしょう。
逆に、jQueryを使うことで、同時に多様な処理を行うこともできるかもしれません。
ここにメモした処理はあくまで一例、ということで。
コメント