Modaal

JavaScript

アクセシビリティに優れたモーダルウィンドウを実装できる「Modaal」

ModaalはWCAG 2.0のレベルAAをサポートしているアクセシビリティに優れたモーダルウィンドウを実装することができるjQueryプラグインです。フォーカス切り替えやキーボードコントロールなど非常に使いやすく、そして見やすいデザインになっています。ハイクオリティなモーダルウィンドウを実装したい方は要チェックですね。

Modaal

デモ

VIEW EXAMPLE、または各タイプのSHOW MODAALというボタンをクリックすることでモーダルウィンドウが開かれます。

フルスクリーンモード、Ajax、イメージギャラリー、動画、iFrame、インスタグラムなどといったコンテンツを表示させるさまざまなモーダルウィンドウのデモが用意されています。

スッキリしたデザインがとても見やすく、それでいて操作性にも優れているのが魅力的です。

  • ajax
  • inline
  • image
  • iframe
  • confirm
  • video
  • instagram

また、ほかにもアニメーションの有無(fadeかnone)やアニメーションスピードの設定、背景カラー、オーバーレイの透明度、フルスクリーン、幅、高さなどといったさまざまなオプションが用意されています。

ユーザビリティ向上にも役立つアクセシビリティに優れたモーダルウィンドウを取り入れたい方は、ぜひチェックしてみてください。

Modaal

関連記事

  1. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

  2. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  3. no-image

    JavaScript

    レスポンシブ対応のjQuery Lightbox & Popupプラグイン「Flashy」

    Flashyはレスポンシブに対応したjQuery Lightbox &…

  4. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

  5. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  6. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

最近の記事

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

アーカイブ

PAGE TOP