jQueryプラグインのPopEasyを使って簡単モーダル表示

2013/08/27

簡単にモーダル表示

概要

モーダルウィンドウとは、なんらかの画面の子画面として生成され、開いている間は他の画面を操作できないインターフェースになっている画面です。
今回は、このモーダルウィンドウを簡単に設置することができるPopEasyというjQueryプラグインを紹介します。

画面遷移を行わずにメッセージや何かの情報を表示したり、入力フォームを表示したり、画像を拡大表示したいときなどに便利です。
画面遷移を行わずに表示できるというのが最大の利点なのではないでしょうか。

設置

PopEasyからダウンロードします。

css、jsを読込、以下のHTMLを作成します。


<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">


<a class="modalLink" href="#modal1">クリック</a>

<div class="overlay"></div>
<div id="modal1_area" class="modal">
	<p class="closeBtn">Close</p>
	<h2 style="margin-bottom: 60px;">PopEasy</h2>
	<p>モーダルで表示されます。</p>
</div>


<script type='text/javascript' src='js/jquery.modal.js'></script>
<script type='text/javascript' src='js/site.js'></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.0.min.js'></script>

たったこれだけでモーダル画面を設置することができます。

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

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...
トップへ戻る