jQuery 2015-01-24

jQueryプラグインでポップアップモーダルウィンドウを実装する

modal

今回は、jQueryプラグイン【Remodalr】のご紹介です。
こちらのプラグインは、シンプルなモーダルウィンドウを簡単に実装出来るプラグインとなっています。

モーダルウィンドウを利用すれば、コンテンツやちょっとしたテキスト・プロフィールをスペースを取ることなく表示させることが出来るので、便利だと僕が思います。

また、こちらのモーダルウィンドウは、オプションなどあまりありませんが、とてもシンプルでカスタマイズ性に優れていますし、レスポンシブにも対応していますので、とりあえずモーダルウィンドウを実装したい場合にオススメのjQuryプラグインです。

実際に【Remodalr】を利用したデモサイトも用意しましたので、参考頂ければと思います。

デモサイト

実際にこちらのプラグインを利用する場合は、下記より必要ファイルなどをダウンロードして下さい。

Remodalr

モーダルウィンドウ 実装方法

それでは、実際に【Remodalr】の実装をしていきたいと思います。
実装をする前にこちらから必要なファイルをダウンロードして下さい。

必要ファイルの読み込み

まずは、jQuery本体と上記でダウンロードしました【jquery.remodal.css】と【jquery.remodal.min.js】をhead要素内に読み込みます。
下記のファイルの階層などは、ご自身の環境に合わせて下さい。

<link rel="stylesheet" href="css/jquery.remodal.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src="js/jquery.remodal.min.js"></script>

HTML

次にHTMLの記述をします。

<a href="#modal">モーダルウィンドウを表示する</a>

<!--▼モーダルウィンドウ▼-->
<div class="remodal" data-remodal-id="modal">
    <h2>モーダルウィンドウ</h2>
    <p>
    	モーダルウィンドウ表示中です
    </p>
</div>

a要素には、【data-remodal-id】で指定したID名を指定します。
また、モーダルウィンドウを表示している時にコンテンツにブラー効果をかける場合は、下記のように【remodal-bg】クラス名をbodyまたは、divなのでコンテンツを囲みます。

<body>
<div class="remodal-bg">
	<header>
		.......
	</header>
    <div class="content">
		<a href="#modal">モーダルウィンドウを表示する</a>
    </div>
    <footer>
    	.......
    </footer>
</div><!--/.remodal-bg-->
<!--▼モーダルウィンドウ▼-->
<div class="remodal" data-remodal-id="modal">
    <h2>モーダルウィンドウ</h2>
    <p>
    	モーダルウィンドウ表示中です
    </p>
</div>
</body>

上記まで記載すれば、モーダルウィンドウの実装の完了となります。
ホントに簡単に実装出来ますし、レスポンシブですので、スマホユーザーにもストレスなく利用できますので、意外と重宝するjQueryプラグイン【Remodalr】だと思います。

実際に【Remodalr】を利用したデモサイトも用意しましたので、参考頂ければと思います。

デモサイト

また、下記のモーダルウィンドウ jQueryプラグインもおすすめです。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS timthumb

Photoshop 吹き出し素材を少し集めてみました 5選

NEXT B29Ylw3

何故か癒やされてしまうシネマグラフを13種類ほど集めてみました