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

no-imageシンプルなイメージカルーセルを実装できる「Boishakh carousel」前のページ

レスポンシブ対応でモバイルフレンドリーなナビゲーションメニュー「GRT Responsive Menu」次のページGRT Responsive Menu

関連記事

  1. Image Lightbox
  2. jQuery Seat Charts
  3. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

  4. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

  5. WebSnowjq.js

    JavaScript

    Webページに雪を降らせてくれるjQueryプラグイン「WebSnowjq.js」

    WebSnowjq.jsはWebページの中に雪を降らせることができるj…

  6. EasyFader Plugin Demo

    JavaScript

    レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo…

    シンプルなフェードアニメーションによるスライドショーを実装することがで…

最近の記事

  1. Anker Bolder LC30
  2. BG-R10
  3. EOS R6

アーカイブ

PAGE TOP