アニメ効果がおもしろいモーダルボックス「Avgrund Modal」
当ページのリンクには広告が含まれています。
スポンサーリンク
アニメ効果がおもしろいモーダルボックスを実装するプラグイン「Avgrund Modal」を紹介します。
jQueryプラグイン「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>
スポンサーリンク