効果音付きでアニメーションするクールなダイアログ実装jQueryプラグイン「Float Dialog」
2011年01月17日-
スポンサード リンク
ExpBuilder Float Dialog v3.0 - Easy PopUp - Expbuilder 2011
効果音付きでアニメーションするクールなダイアログ実装jQueryプラグイン「Float Dialog」。
ピコッと邪魔にならない程度の効果音付きでダイアログをアニメーションしてくれます。この効果音がなんとも分かりやすい上にいやらしさがないところがＧｏｏｄ。
画面を暗くする部分をアニメーションさせたり、ダイアログ自体をアニメーションさせられたりします。
背景色はグレーだけではなく別の色にも調整可能
効果音はmp3なので好きに置き換えることも出来ます。
サンプルコードは以下で、ダイアログ内のデータもHTML内にベタっと書くことができます。JSコードは1行でOK
<a id="linkid" href="javascript:void(0);">ここをクリックで表示</a>
<div id="dialogid">
<a href="javascript:void(0);" class="closebutton">X</a>
<h1>DIALOG DATA HERE !</h1>
</div>
<script>
$("#linkid").floatdialog("dialogid");
</script>
関連エントリ
効果音付きでアニメーションするクールなダイアログ実装jQueryプラグイン「Float Dialog」。
ピコッと邪魔にならない程度の効果音付きでダイアログをアニメーションしてくれます。この効果音がなんとも分かりやすい上にいやらしさがないところがＧｏｏｄ。
画面を暗くする部分をアニメーションさせたり、ダイアログ自体をアニメーションさせられたりします。
背景色はグレーだけではなく別の色にも調整可能
効果音はmp3なので好きに置き換えることも出来ます。
サンプルコードは以下で、ダイアログ内のデータもHTML内にベタっと書くことができます。JSコードは1行でOK
<a id="linkid" href="javascript:void(0);">ここをクリックで表示</a>
<div id="dialogid">
<a href="javascript:void(0);" class="closebutton">X</a>
<h1>DIALOG DATA HERE !</h1>
</div>
<script>
$("#linkid").floatdialog("dialogid");
</script>
関連エントリ
スポンサード リンク
By.KJ : 2011年01月17日 10:07 
間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- CSSのみで実装された５００種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 約７５００種の汎用ピクトグラムアイコン集「Phosphor Icons」
- ほぼCSSで実装されたUIフレームワーク「Ellegant CSS」
- TailwindCSSベースの150種類以上のUIライブラリ「SailboatUI」
- 1700種類以上のSVGアイコン「MingCute Icon」
- 2000種類以上の汎用ピクトグラムアイコン集「Atlas Icons」
- かわいい手書き風フォント「うさぎとまんげつのサンセリフ」
- 過去のエントリ
