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. jquery.horizonScroll.js
  2. Ideal Image Slider

    JavaScript

    シンプルで動きが滑らかなスライダー「Ideal Image Slider」

    Ideal Image Sliderはレスポンシブに対応したシンプルで…

  3. no-image
  4. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  5. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

  6. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP