Simple Modal

JavaScript

レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

Simple Modalはレスポンシブに対応した軽量でシンプルなモーダルを実装できるjQueryモーダルプラグインです。滑らかなアニメーションで余計な装飾もなく、スッキリしたデザインでとても操作しやすいです。レスポンシブ対応により、画面幅に応じて最適なサイズに可変するのが便利ですね。

Simple Modal

デモ

デモでは「Click Me」と書かれたボタンをクリックするとモーダルが立ち上がります。ウィンドウの右上にはバツ印が設置されていて、ここをクリックすると元の画面に戻ります。そのほか、Closeボタンやウィンドウ外をクリックすることでも元の画面に戻ることが可能です。

背景にはオーバーレイがかかるのでモーダル内のコンテンツをグッと注目させられますね。表示・非表示は滑らかなフェードアニメーションで行われます。

Simple Modalはレスポンシブにも対応していて、デモページの画面を縮小していくとそれにあわせてモーダルのサイズも変化します。PCはもちろん、スマホ・タブレットなどいろんなデバイスから閲覧しやすいのがグッドです。

使い方もわかりやすいので手軽に実装できるかと思います。また、data属性には、data-modal、data-modal=”open-modal”、data-modal=”close-modal”が用意されています。

Simple Modal

関連記事

  1. SweetAlert2

    JavaScript

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

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  2. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  3. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

  4. Air Datepicker

    JavaScript

    軽量でクロスブラウザ、モダンブラウザに対応した「Air Datepicker」

    Air Datepickerは軽量でクロスブラウザ、モダンブラウザに対…

  5. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  6. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP