jQuery+Flexboxでさくっと手抜きなモーダルウィンドウ

  • このエントリーをはてなブックマークに追加

長い記事を書いていたらメモリ不足になってきたので、シンプルな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での実装に関しては、基本的なコードのみで可能ですので、色々と工夫していただくとよいかと思います。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*