戻る

モーダルウィンドウ

次へ
DONLOAD DONLOAD DONLOAD 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
<body>
<h1>jQueryを利用したモーダルウィンドウの作成</h1>
<ul>
	<li><a href="image_modal/photo1.jpg" class="modal"><img src="image_modal/photo1_thum.jpg" alt="シャンデリア" /></a></li>
	<li><a href="image_modal/photo2.jpg" class="modal"><img src="image_modal/photo2_thum.jpg" alt="バラ" /></a></li>
	<li><a href="image_modal/photo3.jpg" class="modal"><img src="image_modal/photo3_thum.jpg" alt="海" /></a></li>
	<li><a href="image_modal/photo4.jpg" class="modal"><img src="image_modal/photo4_thum.jpg" alt="門" /></a></li>
	<li><a href="image_modal/photo5.jpg" class="modal"><img src="image_modal/photo5_thum.jpg" alt="海" /></a></li>
	<li><a href="image_modal/photo6.jpg" class="modal"><img src="image_modal/photo6_thum.jpg" alt="あじさい" /></a></li>
	<li><a href="image_modal/photo7.jpg" class="modal"><img src="image_modal/photo7_thum.jpg" alt="空" /></a></li>
	<li><a href="image_modal/photo8.jpg" class="modal"><img src="image_modal/photo8_thum.jpg" alt="建物" /></a></li>
</ul>
<div id='greyLayer'></div>
<div id='overLayer'><img src='image_modal/photo5.jpg' /></div>
</body>
</html>
inserted by FC2 system