<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample3</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");
$("#glayLayer").click(function(){
$(this).hide();
$("#overLayer").hide();
});
$("a.modal").click(function(){
$("#glayLayer").show();
$("#overLayer").show().html("<img src='"+$(this).attr("href")+"' />");
return false;
});
if($.browser.msie && $.browser.version<7){
$(window).scroll(function(){
$("#glayLayer").get(0).style.setExpression("top","$(document).scrollTop()+'px'");
$("#overLayer").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'");
});
}
});
</script>
<style type="text/css">
html,body{
margin:0;
padding:0;
height:100%;
}
h1{
margin:20px 50px;
font-size:large;
border-left:10px solid #7BAEB5;
border-bottom:1px solid #7BAEB5;
padding:10px;
width:600px;
}
ul{
width:700px;
}
ul li{
float:left;
list-style-type:none;
}
ul li img{
border:0;
margin:10px;
}
div#glayLayer{
display:none;
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background:black;
filter:alpha(opacity=60);
opacity: 0.60;
}
* html div#glayLayer{
position:absolute;
}
#overLayer{
display:none;
position: fixed;
top:50%;
left:50%;
margin-top:-244px;
margin-left:-325px;
}
* html #overLayer{
position: absolute;
}
</style>
</head>
<body>
<h1>jQueryを利用したモーダルウィンドウの作成</h1>
<ul>
<li><a href="images/photo1.jpg" class="modal"><img src="images/photo1_thum.jpg" alt="シャンデリア" /></a></li>
<li><a href="images/photo2.jpg" class="modal"><img src="images/photo2_thum.jpg" alt="バラ" /></a></li>
<li><a href="images/photo3.jpg" class="modal"><img src="images/photo3_thum.jpg" alt="海" /></a></li>
<li><a href="images/photo4.jpg" class="modal"><img src="images/photo4_thum.jpg" alt="門" /></a></li>
<li><a href="images/photo5.jpg" class="modal"><img src="images/photo5_thum.jpg" alt="海" /></a></li>
<li><a href="images/photo6.jpg" class="modal"><img src="images/photo6_thum.jpg" alt="あじさい" /></a></li>
<li><a href="images/photo7.jpg" class="modal"><img src="images/photo7_thum.jpg" alt="空" /></a></li>
<li><a href="images/photo8.jpg" class="modal"><img src="images/photo8_thum.jpg" alt="建物" /></a></li>
</ul>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
最終更新：2012年05月24日 15:34
