コーディング /

カスタマイズしやすい!自分で作るjQueryモーダルウィンドウ

いまやWEB制作に欠かせないモーダルウィンドウですが、既存のプラグインを利用すると「やりたい表現があるけど、どこをどうカスタマイズすればいいかわからない…」という状況に陥ってしまった経験がある方も多いのではないでしょうか。

今回は、カスタマイズしやすい簡単なモーダルウィンドウの作り方をご紹介します。

デモはこちら
必要なコードは以下です。(jQueryの読み込み必須)


html css js

「モーダルウィンドウを開くボタン」のリンク先は、モーダルのidと合わせると開きます。
デモ内にある「上からOpen」のようなモーダルウィンドウ開閉時のアニメーションも、以下のように記述を追加することで簡単に実装できます。


css js

cssアニメーションと組み合わせると多彩な表現が可能です。ぜひオリジナルのモーダルウィンドウを作ってみてください!

この記事を書いた人

永渕百合子

PAGE TOP