SweetAlert2

JavaScript

カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2」

SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラートを実装することができます。エラーメッセージなどを、オシャレなアニメーション付きで表示したい人に最適です。

SweetAlert2

デモ

SweetAlert2を使っていないノーマルアラートと、SweetAlert2を使ったアラートの動作を比較してみると、その違いは一目瞭然です。SweetAlert2を使ったアラートでは、バウンスがついたアニメーションによる表示がとてもいい感じです。背景にはオーバーレイもかかります。

また、デモページにはさまざまなタイプのサンプルを見ることができます。タイトルとメッセージがついたもの、アラートが表示されてから2秒後に自動で非表示になるもの、jQuery・HTMLでカスタマイズしたものなど、たくさんのサンプルがあります。

メッセージとともに表示するアイコンもいくつかの種類が用意されていて、success、error、warning、info、questionといったものがあります。

また、セッティング可能なパラメーターの数もかなり豊富で、タイトルやテキストをはじめ、モーダルウィンドウの幅、余白、背景、タイマー、アニメーションなど、自分好みにカスタマイズして使いたい人にはピッタリの仕様といえます。

というわけで、優れたカスタマイズ性やアクセシビリティを備えたレスポンシブ対応のアラートを実装したい人は、ぜひ「SweetAlert2」をチェックしてみてください。

SweetAlert2

関連記事

  1. no-image
  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  3. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

  4. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  5. no-image

    JavaScript

    シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

    jQuery-Colorwheelはシンプルな円形によるカラーピッカー…

  6. Material ScrollTop Button

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP