シンプルイズベスト！おしゃれなモーダルウィンドウを実装できる「SIMPLE MODAL」

お疲れ様です、ももこです。

おしゃれなWebサイトでコンテンツの表示に、モーダルウィンドウを使うと格好よく映えたりしますよね。
今回はクールなモーダルウィンドウを簡単に設置出来るJavaScript「SIMPLE MODAL」※すでに提供を終了していますをご紹介したいと思います。

「SIMPLE MODAL」 デモ

用意されているデモは全部で8種類あります。
その中でも特に使用頻度が高そうな5つのデモをご覧ください。

ALERT

シンプルなアラート風ウィンドウ

MODAL

商品紹介などに使えそうな基本的なウィンドウ

MODAL　AJAX

AJAXを使用し、コンテンツにアコーディオンを含めているウィンドウ

MODAL IMAGE

LightBox風に画像を表示するウィンドウ

VIDEO EMBED

動画を埋め込んで再生するウィンドウ

記述

ウィンドウ内のテキストや画像は全てスクリプトの中に含めます。
「ALERT」に使用するJSは以下のような内容です。

window.addEvent("domready", function(e){
  /* Alert */
  $("alert").addEvent("click", function(e){
    e.stop();
    var SM = new SimpleModal({"btn_ok":"Alert button"});
        SM.show({
          "title":"メディア事業部人材募集中！",
          "contents":"好！好！好！"
        });
  })

他のデモを使用する際の記述は、HOW TO USE　※すでに提供を終了していますをご覧ください。

補足とまとめ

デモではテキストが全て英語でしたが、日本語も問題なく使えます。
IE9とIE8、IE7のブラウザモードで正常な動作が確認できました。

ちなみにダウンロードへのリンクはアイコンをドラッグした下にあります、洒落てますね。
すぐに綺麗なモーダルウィンドウを用意したいときに役立ちそうです(・ω・ )

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。