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. Valiant 360

    JavaScript

    360度のパノラマ動画を実装できるビデオプレーヤー「Valiant 360」

    Valiant 360はブラウザ上で360度のパノラマ動画・写真を実装…

  2. Jquery progress indicator on page scroll
  3. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  4. Simple HTML Menu

    JavaScript

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブ…

  5. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  6. no-image

    JavaScript

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP