今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. スクロールすると自動でコンテンツを読み込む「PageMe」
  3. クールな画像スライダー「Moving Boxes」
  4. カラー・位置・サイズを調節できるスクロールバーを追加「slimScroll」
  5. YouTubeギャラリーを作成「Youtube video gallery」

アニメ効果がおもしろいモーダルボックス「Avgrund Modal」

スポンサーリンク

アニメ効果がおもしろいモーダルボックスを実装するプラグイン「Avgrund Modal」を紹介します。

jQueryプラグイン「Avgrund Modal」

このプラグインを使えば、クリック操作で表示するモーダルボックス(ポップアップ)を実装することができます。

このプラグインのおもしろいところはポップアップだけはなく、その背景にもアニメ効果があるところです。クリック操作でポップアップを表示させると背景は小さくなり、ポップアップと背景の高低差が大きくなったような効果があります。

スポンサーリンク

それではデモをご覧ください。

「Avgrund Modal」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Avgrund Modal - jQueryプラグイン</title>
<link rel="stylesheet" href="css/avgrund.css">
</head>
<body>
<h1>Avgrund Modal のデモでーす。</h1>
<a href="#" id="show">ここをクリック!クリック!</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.avgrund.js"></script>
<script>
$(function() {
  $('#show').avgrund({
    width: 600,
    height: 200,
    holderClass: 'custom',
    showClose: true,
    showCloseText: '閉じるボタン',
    template: '<div>' +
      '<p>こんなかんじのポップアップ・モーダルボックスが表示されます。</p>' +
      '<table border="1">' +
      '<tr><td>テーブル</td><td>なんかも設置できるよ。</td></tr>' +
      '</table>' +
      '</div>'
  });
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)