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

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

  2. Swipe-Li

    JavaScript

    スマホ操作に最適!左右のスワイプで有効・無効を選べるjQueryプラグイン「Swipe-Li」

    Swipe-LiというjQueryプラグインを使えば、左右のスワイプで…

  3. jQuery Video Extend

    JavaScript

    動画をチャプターごとに区切れる「jQuery Video Extend」

    jQuery Video Extendは動画をチャプターごとに区切った…

  4. no-image

    JavaScript

    タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

    simplelightboxはレスポンシブ対応でタッチフレンドリーなl…

  5. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

  6. JavaScript

    サムネイルをクリックして拡大画像が見れるレスポンシブ対応のjQuery画像ギャラリー「Superbo…

    綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQ…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP