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. Greedy Navigation

    JavaScript

    レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」

    Greedy Navigationはレスポンシブ対応でメニューのアイテ…

  2. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  3. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  4. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  5. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

  6. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP