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. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  2. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  3. JavaScript

    ショータイムが始まる前のスポットライトのようなjQueryプラグイン「Spotlight」

    Spotlightはショータイムが始まる前のスポットライトのようなアニ…

  4. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  5. Greedy Navigation

    JavaScript

    レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」

    Greedy Navigationはレスポンシブ対応でメニューのアイテ…

  6. JavaScript

    クリックで画像や要素にオーバーレイを表示させるjQueryプラグイン「Purplecoat.js」

    Purplecoat.jsはクリックすると画像や好きな要素にオーバーレ…

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me

アーカイブ

PAGE TOP