株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

41-13)　1. モーダルウインドウ　画像の表示（LightBox風）

　

LightBox風　モーダルウインドウ
モーダルウィンドウとは表示中に他のウィンドウの操作を受け付けないウィンドウの
ことで、一般的には半透明のレイヤーを重ねて暗くし、表示する。

動作；　サムネイル画像をクリックすると、背景が暗くなり、モーダルウィンドウに画像を表示する。

jQueryの書き方 /*------------------------------------ */
//41-13.　モーダルウィンドウの作成
/*------------------------------------ */
$("body").append("<div id='glayLayer_394'></div><div id='overLayer_394'></div>");
//選択処理
$("#glayLayer_394").click(function(){
$(this).hide();
$("#overLayer_394").hide();
});
//選択処理
$("a.modal").click(function(){
$("#glayLayer_394").show();
$("#overLayer_394").show().html("<img src='"+$(this).attr("href")+"' />");
return false;
});
if($.browser.msie && $.browser.version<7){
$(window).scroll(function(){
$("#glayLayer_394").get(0).style
.setExpression("top","$(document).scrollTop()+'px'");
$("#overLayer_394").get(0).style
.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'");
});
}
ｃｓｓの書き方 --------------
HTMLの書き方 <p class="msg_line">モーダルウィンドウの作成</p>
<div id="info_394">
<ul>
  <li><a href="photo1.jpg" class="modal">
    <img src="photo1_thum.jpg" alt="シャンデリア" /></a></li>
  <li><a href="photo2.jpg" class="modal">
    <img src="photo2_thum.jpg" alt="バラ" /></a></li>
  <li><a href="photo3.jpg" class="modal">
    <img src="photo3_thum.jpg" alt="海" /></a></li>
  <li><a href="photo4.jpg" class="modal">
    <img src="photo4_thum.jpg" alt="門" /></a></li>
  <li><a href="photo5.jpg" class="modal">
    <img src="photo5_thum.jpg" alt="海" /></a></li>
  <li><a href="photo6.jpg" class="modal">
    <img src="photo6_thum.jpg" alt="あじさい" /></a></li>
  <li><a href="photo7.jpg" class="modal">
    <img src="photo7_thum.jpg" alt="空" /></a></li>
  <li><a href="photo8.jpg" class="modal">
    <img src="photo8_thum.jpg" alt="建物" /></a></li>
</ul>

モーダルウィンドウに画像を表示する

  • シャンデリア
  • バラ
  • 海
  • 門
  • 海
  • あじさい
  • 空
  • 建物