jquery.confirmDialog

JavaScript

フルスクリーンによるダイアログボックスを表示できる「jquery.confirmDialog」

jquery.confirmDialogは、フルスクリーンによるかっこいいダイアログボックスを表示させることができます。トリガーされると、画面上部からスライドダウンでダイアログボックスが降りてきます。フルスクリーンなのでとてもダイナミックですね。

jquery.confirmDialog

jquery.confirmDialog

デモページでは、「DEMO」と書かれたボタンが設置されており、これをクリックすると上からダイアログボックスがスライドダウンで表示されます。

フルスクリーン(背景にはオーバーレイがかかります)で表示されるダイアログボックスは、選択する時に集中しやすくなるのでとてもいい感じですね。

ちなみに、デモではダイアログボックスを表示したあと「YES」か「CANCEL」を選択するようになっています。

また、オプションを用いたセッティングも可能です。主なオプション項目は、attachAfter、title、accept、refuse、acceptStyle、refuseStyle、acceptActionです。

ダイアログボックスに表示させたいテキストは「title」に指定すればOKです。2つの選択ボタン(YES or NO)に表示させるテキストも、「accept」と「refuse」から指定できます。YES側が「accept」、NO側が「refuse」です。さらに、ボタンのスタイルも「acceptStyle」と「refuseStyle」から変更可能です。

シンプルながらもオプションによる細かいセッティングもできるので、自分好みのかっこいいフルスクリーンによるダイアログボックスを実装したい方は、ぜひチェックしてみてください。

blurify画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」前のページ

軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」次のページMoveTo

関連記事

  1. Text Effects

    JavaScript

    テキストがカシャカシャ切り替わって表示するjQueryプラグイン「Text Effects」

    Text EffectsというjQueryプラグインを使えば、テキスト…

  2. jQuery fatNav

    JavaScript

    ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」

    jQuery fatNavはミニマルテイストなフルスクリーンのナビゲー…

  3. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  4. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  5. funnyText.js

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP