主要是要考虑浏览器的兼容性和样式
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title></title> 6 <style type="text/css"> 7 <!-- 8 html,body { width:auto; height:auto; margin:0 auto;font-size:12px;} 9 .mydiv { /*弹出时的方框*/ 10 text-align:center; 11 background-color: #FFCC66; 12 border: 1px solid #f00; 13 z-index:999; 14 width: 500px; 15 height:400px; 16 left:50%;/*FF IE7*/ 17 top:35%;/*FF IE7*/ 18 margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */ 19 margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/ 20 margin-top:0px; 21 position:fixed!important;/*FF IE7*/ 22 position:absolute;/*IE6*/ 23 24 _top:expression(eval(document.compatMode && 25 document.compatMode=='CSS1Compat') ? 26 documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ 27 document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ 28 29 } 30 .bg,.popIframe { /*弹出时整个框背景颜色*/ 31 background-color: #666; display:none; 32 width: 100%; 33 height: 100%; 34 left:0; 35 top:0;/*FF IE7*/ 36 filter:alpha(opacity=50);/*IE*/ 37 opacity:0.5;/*FF*/ 38 z-index:1;position:fixed!important;/*FF IE7*/ 39 position:absolute;/*IE6*/_top: expression(eval(document.compatMode && 40 document.compatMode=='CSS1Compat') ? 41 documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ 42 document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ 43 } 44 .popIframe { 45 filter:alpha(opacity=0);/*IE*/ 46 opacity:0;/*FF*/ 47 } 48 body a img{border: 2px solid #CCF} 49 --> 50 </style> 51 <script language="javascript" type="text/javascript"> 52 function showDiv(url){ 53 document.getElementById('popDiv').style.display='block'; 54 //document.getElementById('popIframe').style.display='block'; 55 document.getElementById('bg').style.display='block'; 56 document.getElementById('popImg').src=url; 57 58 } 59 function closeDiv(){ 60 document.getElementById('popDiv').style.display='none'; 61 document.getElementById('bg').style.display='none'; 62 document.getElementById('popIframe').style.display='none'; 63 }</script> 64 </head> 65 <body> 66 67 <!--弹出时的图片--> 68 <div id="popDiv" class="mydiv" style="display:none;"> 69 <img id='popImg' src="images/1.jpg" width="500" height="380" /> 70 <span style="display:block; margin-top:5px;"><a href="javascript:closeDiv()">关闭窗口</a></span> 71 </div> 72 73 74 <!--未弹出时的图片--> 75 <div id="bg" class="bg" style="display:none;"></div><div style="height:1400px;"> 76 <a href="javascript:showDiv('images/1.jpg')"><img src="images/1.jpg" width="131" height="84" /></a> 77 <br /> 78 <a href="javascript:showDiv('images/3.jpg')"><img src="images/3.jpg" width="131" height="84" /></a> 79 <br /> 80 <a href="javascript:showDiv('images/4.jpg')"><img src="images/4.jpg" width="131" height="84" /></a> 81 </div> 82 83 84 85 86 //<iframe id='popIframe' class='popIframe' frameborder='0' ></iframe> 87 </body> 88 </html>
http://download.csdn.net/detail/yekeyishuo/6468265