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. Simple Image Panner and Zoomer
  2. HoldOn.js

    JavaScript

    ユーザーの待機中に表示させるアニメーション実装「HoldOn.js」

    HoldOn.jsはユーザーが待機している間に表示させるアニメーション…

  3. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

  4. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  5. SweetDropdown

    JavaScript

    スタイリッシュで多彩なドロップダウンを実装できる「SweetDropdown」

    SweetDropdownは、多彩なドロップダウンを実装することができ…

  6. EZ Tabs jQuery Plugin

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP