Pocket

いまやWEB制作に欠かせないモーダルウィンドウですが、既存のプラグインを利用すると「やりたい表現があるけど、どこをどうカスタマイズすればいいかわからない…」という状況に陥ってしまった経験がある方も多いのではないでしょうか。
今回は、カスタマイズしやすい簡単なモーダルウィンドウの作り方をご紹介します。
デモはこちら
必要なコードは以下です。(jQueryの読み込み必須)

html

css

js


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

css

js


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

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。