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

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

サイトのキャプチャ

Simple Modal

Simple Modalの特徴

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

Simple Modalのデモ

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

デモのキャプチャ

デモ

デモのキャプチャ

デモ:ALERT

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

デモのキャプチャ

デモ:MODAL

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

デモのキャプチャ

デモ:MODAL AJAX

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

デモのキャプチャ

デモ:MODAL IMAGE

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

デモのキャプチャ

デモ:VIDEO EMBED

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

デモのキャプチャ

デモ:?

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

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のダウンロード

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

サイトのキャプチャ

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

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

top of page

©2017 coliss