<\/p>\n
jQuery\u3092\u4f7f\u3063\u305f\u30e2\u30fc\u30c0\u30eb\u98a8\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u7d39\u4ecb\u3067\u3059\u3002\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u3082\u5b9a\u7fa9\u3057\u3066\u304a\u308a\u307e\u3059\u3002
\n\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306e\u753b\u50cf\u3082\u540c\u3058\u753b\u50cf\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002\u30b5\u30a4\u30ba\u306f\uff23\uff33\uff33\u306b\u3066\u5909\u66f4\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u4eca\u56de\u4f7f\u7528\u3057\u305fjquery.min.js<\/b>\u306f\u3001ver2.0.3\u3067\u3059\u3002<\/p>\n
<\/p>\n
\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002
\n\u25bcJavaScript<\/p>\n
<script src=\"js\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(function modalwindows(){\r\n\t$(\"body\").append(\"<div id='glayLayer'><\/div><div id='overLayer'><\/div>\");\r\n\t\t\t\r\n\t$(\"#glayLayer\").click(function(){\r\n\t\t$(this).hide()\r\n\t\t$(\"#overLayer\").hide();\r\n\t});\r\n\t\t\t\r\n\t$(\"a.modal\").click(function(){\r\n\t\tvar amodal=$(this)\r\n\t\t$(\"#glayLayer\").fadeIn(500,function(){\r\n\t\t\t$(\"#overLayer\").show().html(\"<img src='\"+$(amodal).attr(\"href\")+\"'>\");\r\n\t\t});\r\n\treturn false;\r\n\t});\r\n});\r\n<\/script>\r\n<\/pre>\n\u25bcCSS <\/p>\n
<style>\r\ndiv#glayLayer {\r\n\tdisplay:none;\r\n\tposition:fixed;\r\n\tleft:0;\r\n\ttop:0;\r\n\theight:100%;\r\n\twidth:100%;\r\n\tbackground:black;\r\n\tfilter:alpha(opacity=60);\r\n\topacity: 0.60;\r\n}\r\ndiv#overLayer {\r\n\tdisplay:none;\r\n\tposition: fixed;\r\n\ttop:50%;\r\n\tleft:50%;\r\n\tmargin-top:-300px;\r\n\tmargin-left:-300px;\r\n}\r\n\/* ====== \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7528\u306e\u8a2d\u5b9a(480px\u4ee5\u4e0b) ====== *\/\r\n@media only screen and (max-width:480px) {\r\n\r\n\timg {\r\n\t\twidth:450px;\r\n\t\theight:450px;\r\n\t}\r\n\tdiv#overLayer img {\r\n\t\twidth:300px;\r\n\t\theight:300px;\r\n\t}\r\n\tdiv#overLayer {\r\n\t\tmargin-top:-150px;\r\n\t\tmargin-left:-150px;\r\n\t}\r\n\r\n}\r\n\r\n<\/style>\r\n<\/pre>\n\u25bcHTML <\/p>\n
<div class=\"gallery_box\">\r\n <a href=\"images\/photoA1.jpg\" class=\"modal\"><img src=\"images\/photoA1.jpg\"><\/a>\r\n <a href=\"images\/photoA2.jpg\" class=\"modal\"><img src=\"images\/photoA2.jpg\"><\/a>\r\n <\/div>\r\n<\/pre>\n