[JS]ドラッグで移動も可能なモーダルウインドウを作成する軽量スクリプト -Simple Modal

アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。

Simple Modal

[ad#ad-2]

• Simple Modalの特徴
• Simple Modalのデモ
• Simple Modalの実装
• Simple Modalのダウンロード

Simple Modalの特徴

• モーダルウインドウを簡単に生成します。
• 生成したモーダルウインドウは、ドラッグ操作で移動可能です。
• コールバック関数を備えています。
• 画像や動画、AJAXコンテンツにも対応しています。

Simple Modalのデモ

デモではSimple Modalのさまざまな実装例があります。

デモ

デモ：ALERT

アラートのウインドウを表示します。

デモ：MODAL

さまざまなエレメントが配置できるモーダルウインドウを表示します。

デモ：MODAL AJAX

AJAXコンテンツにも対応しています。

デモ：MODAL IMAGE

アニメーションを使って画像をLightbox風に表示します。

デモ：VIDEO EMBED

動画コンテンツにも対応。

[ad#ad-2]

デモ：？

最後の「？」は実際に試してみてくださいｗ

Simple Modalの実装

モーダルウインドウに表示するエレメントはスクリプトに記述します。

JavaScript: ALERT

最初のデモ「ALERT」は、こんな感じになります。

$("myElement").addEvent("click", function(){
  var SM = new SimpleModal({"btn_ok":"Alert button"});
      SM.show({
        "title":"Title",
        "contents":"Your message..."
      });
});

JavaScript: IMAGE

画像を表示する場合も同様です。

$("myElement").addEvent("click", function(){
  var SM = new SimpleModal();
      SM.show({
        "model":"modal-ajax",
        "title":"Image title",
        "param":{
          "url":"http://url-file.jpg",
          "onRequestComplete": function(){ }
        }
      });
});

その他の実装例は「how to use」をご覧ください。

• Simple Modal -how to use

Simple Modalのダウンロード

ダウンロードは、このスクリプトの特徴とも言えるドラッグ操作を行って、ダウンロードします。

トップからダウンロードへリンクも要ドラッグ操作です

「download」ではウインドウをドラッグして、ダウンロードしてください。

• Simple Modal -download