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. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  2. jQuery Lighter

    JavaScript

    優雅なフェードで拡大縮小されるLightbox系ギャラリー・jQuery Lighter

    jQuery Lighterは美しいフェードで画像を拡大縮小させること…

  3. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

  4. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

  5. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP