[JS]機能も充実、設置も簡単、デザインも素敵！モーダルウインドウを実装する超軽量のスクリプト -Pop Easy

Pop Easyはテキストや画像、フォーム、動画、Google Mapsなどを配置できるモーダルウインドウを実装するjQueryのプラグインで、モーダルウインドウ自体の機能・デザイン性も優れていますが、ページのデザインもかっこいいのはなかなか出会うことが少ないです。

下記のキャプチャだけでも、そのデザインにワクワクする人が多いと思います。

Pop Easy

• Pop Easyのデモ
• Pop Easyの使い方

Pop Easyのデモ

デモは全部で4種類、全てのモダンブラウザ、IEは7+でご覧ください。

デモも細部までこだわりを感じるデザインです。

デモ

まずは、画像やテキストを配置したモーダルウインドウ。

ポップアップ

続いて、ログインなどのフォームを配置したモーダルウインドウ。

ログイン

モーダルウインドウはリンクさせることが可能で、左下の「Click Me」をクリックすると、そのままの状態で中身が変わります。

モーダル内でのリンクにも対応

動画も設置可能です。

vimeoの動画

最後は、iframeを使ったモーダルウインドウ。
iframeでGoogle Mapsの地図を表示しています。

Google Maps

Pop Easyの使い方

使い方は非常にシンプルです。

Step 1: 外部ファイル

スクリプトを</body>の上あたりに、外部ファイルとして記述します。

<script type='text/javascript' src='js/jquery.modal.js'></script>
<script type='text/javascript' src='js/site.js'></script>

Step 2: HTML

最低限必要なHTMLの構造は、こんな感じです。
L.1がトリガー、L.2がオーバーレイ用の空div、L3-6がモーダル内のコンテンツです。

<a class="modalLink" href="#">Click Me</a>
<div class="overlay"></div>
<div class="modal">
  <a href="#" class="closeBtn">Close Me</a>
  <!-- ここのコンテンツ -->
</div>

Step 3: CSS

Step 2のHTMLをベースに、オーバーレイとモーダルウインドウ用の最低限のスタイルを定義します。

.overlay{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

.modal{
  display: none;
  background:#eee;
  padding:0 20px 20px;
  overflow:auto;
  z-index:1001;
  position:absolute;
  width: 500px;
  min-height: 300px;
}

Step 4: JavaScript

トリガー（.modalLink）をjQueryのセレクタで指定し、スクリプトを実行します。
オプションではエフェクトの種類やスピード、カラー・不透明度などを設定できます。

$(document).ready(function(){
  $('.modalLink').modal({
    trigger: '.modalLink',
    olay:'div.overlay',
    modals:'div.modal',
    animationEffect: 'slidedown',
    animationSpeed: 400,
    moveModalSpeed: 'slow',
    background: '00c2ff',
    opacity: 0.8,
    openOnLoad: false,
    docClose: true,
    closeByEscape: true,
    moveOnScroll: true,
    resizeWindow: true,
    video:'http://player.vimeo.com/video/9641036?color=eb5a3d',
    close:'.closeBtn'
  });
});

ドキュメントページのデザインもかっこいいですよ。

デモ