jQueryでモーダルダイアログを実現するAvgrund Modal

はじめに

jQueryでオシャレなモーダルダイアログを実現したいと思った人には、「Avgrund Modal」というプラグインがオススメです。
Avgrund Modalを使うと簡単にインパクトのあるモーダルダイアログを実装することができます。

jQueryデザインブック　仕事で絶対に使うプロのテクニック

posted with amazlet at 12.12.02

MdN
売り上げランキング: 81964

Amazon.co.jp で詳細を見る

デモ

以下のサイトへ行き「SHOW IT」のリンクをクリックしてみてください。

jQuery plugin for Avgrund concept popin

Avgrund Modalの入手

jQueryのプラグインであるAvgrund Modalは上記のサイト「DOWNLOAD SOURCE」のリンクから入手できます。

Avgrund Modalの使い方

はじめに、Avgrund Modalのスタイルシートを読み込みます。

<link rel="stylesheet" href="./style/style.css">
<link rel="stylesheet" href="./style/avgrund.css">

続いて、jsファイルを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="./js/jquery.avgrund.js"></script>

モーダルダイアログを表示されるトリガとなる要素に対して、avgrundメソッドを呼び出します。

$('#show').avgrund({
  height: 200,
  holderClass: 'custom',
  showClose: true,
  showCloseText: '閉じる',
  enableStackAnimation: true,
  onBlurContainer: '.container',
  template: '<p>ここは任意のコンテンツを書けます。モーダルダイアログはEscキーでとじることができます。</p>' +
  '<div align="center">' +
  '　<a href="#" onclick="clickYes()" class="twitter">はい</a>' +
  '　<a href="#" onclick="clickNo()" class="twitter">いいえ</a>' +        
  '</div>'
});

サンプルプログラム

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>サンプルプログラム</title>
  <link rel="stylesheet" href="./style/style.css">
  <link rel="stylesheet" href="./style/avgrund.css">
</head>
<body>
  <h1>Avgrund Modalのテスト</h1>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="./js/jquery.avgrund.js"></script>
  <script>
  function clickYes() {
    alert("はいがクリックされました。");
    // モーダルダイアログを閉じる
    $('body').removeClass('avgrund-active');
  }
  
  function clickNo() {
    alert("いいえがクリックされました。");
    // モーダルダイアログを閉じる
    $('body').removeClass('avgrund-active');
  }
  
  $(function() {
    $('#show').avgrund({
      height: 200,
      holderClass: 'custom',
      showClose: true,
      showCloseText: '閉じる',
      enableStackAnimation: true,
      onBlurContainer: '.container',
      template: '<p>ここは任意のコンテンツを書けます。モーダルダイアログはEscキーでとじることができます。</p>' +
      '<div align="center">' +
      '　<a href="#" onclick="clickYes()" class="twitter">はい</a>' +
      '　<a href="#" onclick="clickNo()" class="twitter">いいえ</a>' +        
      '</div>'
    });
  });
  </script>
  <input type="button" id="show" value="モーダルダイアログを開く">
</body>
</html>