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」を活用されてみてはいかがでしょうか。

no-imageフラットでシンプルなカラーピッカー実装「Pickr」前のページ

テキストをコンテナ幅にすばやくフィットさせる「TextFit」次のページTextFit

関連記事

  1. Tabby

    JavaScript

    軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」

    とても軽量でシンプルなタブメニューを実装できるjQueryプラグイン「…

  2. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

  3. jquery.adaptive-backgrounds.js
  4. Maximum Characters limit exceeded warning
  5. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  6. Multi-Screen.js

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP