<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function(){ $("img").click(function(){ $("div:nth-of-type(1)") .css("display","block") .html("<img src=\""+ $(this).attr("src") + "\">"); $("div:nth-of-type(1) img").css({ width:"400px", height:"400px" }); $("div:nth-of-type(2)").css("display","block"); }); $(window).keydown(function(e){ if(e.keyCode == 27){ $("div:nth-of-type(1)").css("display","none"); $("div:nth-of-type(2)").css("display","none"); } }).keyup(function(e){ }); }); </script> <style> div:nth-of-type(1){ position:fixed; top:50%; left:50%; margin-left:-200px; margin-top:-200px; display:none; width:400px; height:400px; } div:nth-of-type(2){ display:none; position:fixed; top:50%; left:50%; margin-left:-150px; margin-top:-25px; display:none; width:300px; height:50px; text-align:center; line-height:50px; font-size:24px; color:#FFFFFF; border-radius:10px; background-color:#CCCCCC; opacity:0.4; } </style> </head> <body> <img src="img/image1.png"> <div></div> <div>HIDE TO ESCAPE</div> </body> </html>