長い記事を書いていたらメモリ不足になってきたので、シンプルなTipsを書いてクールダウンしようと思います。
モーダルウィンドウを利用する場合、プラグインを利用することが多いかと思います。
実際にクローズボタンやそれ以外の処理も含めてやってしまう場合は、プラグイン利用の方が簡単です。
一方で、そこまでしなくても…という場合があるのも事実です。
(モック作成とか、ワイヤーフレームをHTMLでやるとか)
ということで、サクッとモーダルウィンドウを実装してみたいと思います。
まずはHTMLコーディング
できるだけシンプルにコーディングします。
<div class="modal_wrapper">
<div class="modal_window">
</div>
</div>
class「modal_window」内の体裁を整えたい場合は、適宜要素を追加してください。
続いてCSS
こちらもできるだけシンプルに…
.modal_wrapper{
background-color: black;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.modal_window{
width: 50vw;
height: 50vh;
background-color: white;
}
ちょっとおしゃれにしたければ、class「modal_wrapper」の背景色をrgbaで透過したり、class「modal_window」にborder-radiusを追加してもよいかと思います。
ちょっと小細工
さて、無事にモーダルっぽいウィンドウが表示されていると思いますが、モーダルウィンドウを最初から表示するパターンというのは少ないと思います。
さらに今回は手抜きをしてdisplay:flexを利用しています。
ということで、このようにしてモーダルウィンドウを非表示にします。
<div class="modal_wrapper" style="display:none;">
超手抜きですね。
推奨される記法ではありませんが、こうするとdisplay:flexを活かしたままモーダルウィンドウを非表示にできます。
jQueryで非表示にしたら同じことが起きますので、手抜き実装ということで。
jQueryで表示、非表示の切替
jQueryで要素の表示、非表示をコントロールするには以下のメソッドを利用します。
メソッド | 説明 |
.show() | 要素を表示する。 |
.hide() | 要素を非表示にする。 |
.toggle() | 要素の表示、非表示を切り替える。 |
.fadein() | 要素をフェードインする。 |
.fadeout() | 要素をフェードアウトする。 |
.fadeToggle() | 要素の表示、非表示をフェードで切り替える。 |
明確に表示、非表示にする場合でなければtoggleメソッドが便利です。
引数に時間(ミリ秒)を入力すると、その時間で表示、非表示が切り替わります。
おまけで、フェード関連のメソッドも記載しました。
引数には時間のほか、イージングも指定可能です。
$('hoge').show(2000);
例えば、上記の例であれば「2秒かけてhoge要素を表示する」となるわけです。
何か要素をクリックした際にモーダルウィンドウを表示する場合は、以下のようになります。
$('hoge').on('click',function(){
$('.modal_wrapper').toggle();
});
jQueryでの実装に関しては、基本的なコードのみで可能ですので、色々と工夫していただくとよいかと思います。