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

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  2. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

  3. no-image

    JavaScript

    いろんなズーム機能を実装できるjQueryプラグイン「xZoom」

    xZoomはいろんなズーム機能を実装することができるカスタマイズ性に優…

  4. AnimateScroll

    JavaScript

    面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」…

    ページの任意の場所にスクロールできるjQueryプラグイン「Anima…

  5. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP