代码用HTML+JS实现：
1 代码（用HTML+JS实现）： 2 <!doctype html> 3 <html lang="UTF-8"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <title>div 弹出层触发click事件弹出</title> 8 <style type="text/css"> 9 <!-- html, 10 body { 11 height: 100%; 12 margin: 0px; 13 font-size: 12px; 14 } 15 16 .mydiv { 17 line-height: 20px; 18 border: 1px solid #0080FF; 19 font-size: 12px; 20 z-index: 999; 21 width: 500px; 22 height: 220px; 23 left: 72%; 24 top: 20%; 25 margin-left: -150px!important; 26 /*FF IE7 该值为本身宽的一半 */ 27 margin-top: -60px!important; 28 /*FF IE7 该值为本身高的一半*/ 29 margin-top: 0px; 30 position: fixed!important; 31 /* FF IE7*/ 32 position: absolute; 33 /*IE6*/ 34 } 35 </style> 36 </head> 37 38 <body> 39 <div id="popDiv" class="mydiv" style="display:none;"> 40 <div align="right" style="padding:2px;z-index:2000;font-size:12px;cursor:pointer;position:absolute;right:0;" onclick="closeDivFun()"> 41 <span style="border:1px solid #000;width:12px;height:12px;line-height:12px;text-align:center;display:block;background-color:#FFFFFF;left:-20px;">×</span> 42 </div> 43 div弹出窗口信息！<br/>可以在此添加自定义内容<br/> 44 <a href="javascript:closeDivFun()">关闭窗口</a> 45 </div> 46 <a href="javascript:showDivFun()">点击这里弹出层</a> 47 <script> 48 //弹出调用的方法 49 function showDivFun() { 50 document.getElementById('popDiv').style.display = 'block'; 51 } 52 //关闭事件 53 function closeDivFun() { 54 document.getElementById('popDiv').style.display = 'none'; 55 } 56 </script> 57 </body> 58 59 </html>
显示效果：
