no-image

JavaScript

レスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」

jquery.alertはレスポンシブに対応したモーダルウィンドウ風のアラートを実装できるjQueryプラグインです。モーダルウィンドウのように表示されるので、アラートがどこか穏やかな感じになりますね。

jquery.alert

jquery.alert

デモでは右上に設置されている「DEMO」ボタンをクリックするとアラートが表示されます。アラート画面の背景(オーバーレイがかかっている部分)がスライドアニメーションで上から降りてきて、それと同時にアラートがフェードで表示されます。

モーダルウィンドウのようなアラートがとてもかっこいいですね。「ACCEPT」ボタンかアラートの外側をクリックすると、元の状態に戻ります。escキーにも対応しているので、ここから元の状態に戻すことも可能です。

また、jquery.alertはレスポンシブにも対応しています。モバイル版ではアラート画面全体がフェードで表示されます。右上にバツ印のアイコンがあり、「ACCEPT」ボタンかこのバツ印のアイコンをクリックすると、元の状態に戻ります。モバイル版は画面全体がアラート画面になるので、小さい画面でも見やすくて操作しやすいところがいいですね。

パラメーターには、attachAfter、title、template、confirmText、confirmStyle、callbackといった項目が用意されていて、ちょっとしたカスタマイズを行うことが可能です。実装方法もわかりやすく簡単に使えるところがいいですね。

パソコンからでもスマホからでも見やすいモーダルウィンドウ風のレスポンシブに対応したアラートを実装したい人は、ぜひ「jquery.alert」を活用されてみてはいかがでしょうか。

関連記事

  1. no-image

    JavaScript

    フレキシブルでモバイルフレンドリーなフォトギャラリー実装「jGallery」

    jGalleryは、フレキシブルでモバイルフレンドリーなフォトギャラリ…

  2. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  3. jQuery Slideshow

    JavaScript

    シンプル・軽量・レスポンシブなスライダー実装「jQuery Slideshow」

    jQuery Slideshowはシンプルで軽量、そしてレスポンシブに…

  4. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  5. JavaScript

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

  6. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP