フォントサイズの変更｜ 背景画像の変更｜ 画像の変更(サムネイル)｜ モーダル｜ 地図変更｜ ニュースティッカー

モーダルの表示ですか
モーダルを表示する
モーダル2を表示する

処理内容

href部分に開きたいhtmlファイルを指定する
wとhのパラメータを指定する事で、モーダルウインドウの大きさを調整できます

widthとheightは指定がない場合、?以降を記述しなければ width:450 height:450で入りますが
どちらか片方とか謎パラメータを付けた場合はJSエラーがでてしまいます。
要望あれば直します。

$(function() {
 $('.modalOpen').bind('click', function()
 {
  //--------------------------------------------------------------------
  // 変数定義
  //--------------------------------------------------------------------
  var href = $(this).attr('href').split("?"), fileName, w=450, h=450;

  //--------------------------------------------------------------------
  // モーダルコンテンツサイズ指定取得+設定
  // 指定がない場合はデフォルトを指定
  //--------------------------------------------------------------------
  if (href[1] != undefined)
  {
   w = href[1];
   w = w.split("&");
   w = w[0].split("=");
   w = w[1];
   h = href[1];
   h = h.split("&");
   h = h[1].split("=");
   h = h[1];
   if (h >= 500) {
    h = 500;
   }
   fileName = href[0];
  }

  $('#modal').find('.container').css( {
   width : w + 'px',
   height : h + 'px'
  })

  //--------------------------------------------------------------------
  // モーダルコンテンツの位置初期設定
  //--------------------------------------------------------------------
  adjustCenter("#modal .container");

  //--------------------------------------------------------------------
  // モーダルのフェードイン
  //--------------------------------------------------------------------
  $("#modal").fadeIn(500);

  //--------------------------------------------------------------------
  // モーダルコンテンツの取得+DOMへ挿入
  // delayを入れる事で、全体(透明背景)表示後に、一拍開けてコンテンツ表示としている
  //--------------------------------------------------------------------
  $("#modal .container").delay(500).load($(this).attr("href"), "", onComplete);

  //--------------------------------------------------------------------
  // ウィンドウリサイズ時の位置調整
  //--------------------------------------------------------------------
  $(window).resize(function()
  {
   adjustCenter("#modal .container");
  });

  //--------------------------------------------------------------------
  // モーダルを閉じる処理
  //--------------------------------------------------------------------
  $("#modal .background").click(function()
  {
   displayModal(false);
  });

  return false;

 })

 //--------------------------------------------------------------------
 // モーダルコンテンツ呼び出し完了時に実行されるもの
 //
 //--------------------------------------------------------------------
 function onComplete()
 {
  displayModal(true);
  $("#modal .container a.close").click(function()
  {
   displayModal(false);
   return false;
  });
 }

 //--------------------------------------------------------------------
 // モーダル開閉クラス
 //--------------------------------------------------------------------
 function displayModal(sign)
 {
  if (sign)
  {
   $("#modal .container").fadeIn(500);
  }
  else
  {
   $("#modal").fadeOut(250);
   $("#modal .container").fadeOut(250);
  }
 }


 //--------------------------------------------------------------------
 // モーダルコンテンツ位置の調整用関数
 //--------------------------------------------------------------------
 function adjustCenter(target)
 {
  var margin_top = ($(window).height() - $(target).height()) / 2;
  var margin_left = ($(window).width() - $(target).width()) / 2;
  $(target).css( {
   top : margin_top + "px",
   left : margin_left + "px"
  });
 }

});