<html lang="ja">
<head>
<meta charset="utf-8">
<title>モーダルウィンドウの作成</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<style>
body,ul,li,a,img,h1{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
ul li{
width:1000px;
display:inline;
}
h1{
border-left:solid 10px #09C;
margin-bottom:20px;
padding:10px;
padding-left:20px;
border-bottom:#FF66CC solid 2px;
}
</style>
<h1>jQueryを利用したモーダルウィンドウの作成</h1>
<ul>
<li><a href="img/01.jpg" class="modal"><img src="img/01.jpg" width="280" height="120" alt="a"></a></li>
<li><a href="img/02.jpg" class="modal"><img src="img/02.jpg" width="280" height="120" alt="b"></a></li>
<li><a href="img/03.jpg" class="modal"><img src="img/03.jpg" width="280" height="120" alt="c"></a></li>
<li><a href="img/04.jpg" class="modal"><img src="img/04.jpg" width="280" height="120" alt="d"></a></li>
<li><a href="img/05.jpg" class="modal"><img src="img/05.jpg" width="280" height="120" alt="e"></a></li>
<li><a href="img/06.jpg" class="modal"><img src="img/06.jpg" width="280" height="120" alt="f"></a></li>
<li><a href="img/07.jpg" class="modal"><img src="img/07.jpg" width="280" height="120" alt="g"></a></li>
<li><a href="img/08.jpg" class="modal"><img src="img/08.jpg" width="280" height="120" alt="h"></a></li>
</ul>
<div id="glaylayer"></div>
<div id="overlayer"><img src="img/05.jpg" width="400" height="250"></div>
</body>
</html>
