代码用HTML+JS实现：
代码（用HTML+JS实现）：
<!doctype html>
<html lang="UTF-8"> <head>
<meta charset="UTF-8">
<title>div 弹出层触发click事件弹出</title>
<style type="text/css">
<!-- html,
body {
height: 100%;
margin: 0px;
font-size: 12px;
} .mydiv {
line-height: 20px;
border: 1px solid #0080FF;
font-size: 12px;
z-index: 999;
width: 500px;
height: 220px;
left: 72%;
top: 20%;
margin-left: -150px!important;
/*FF IE7 该值为本身宽的一半 */
margin-top: -60px!important;
/*FF IE7 该值为本身高的一半*/
margin-top: 0px;
position: fixed!important;
/* FF IE7*/
position: absolute;
/*IE6*/
}
</style>
</head> <body>
<div id="popDiv" class="mydiv" style="display:none;">
<div align="right" style="padding:2px;z-index:2000;font-size:12px;cursor:pointer;position:absolute;right:0;" onclick="closeDivFun()">
<span style="border:1px solid #000;width:12px;height:12px;line-height:12px;text-align:center;display:block;background-color:#FFFFFF;left:-20px;">×</span>
</div>
div弹出窗口信息！<br/>可以在此添加自定义内容<br/>
<a href="javascript:closeDivFun()" rel="external nofollow" >关闭窗口</a>
</div>
<a href="javascript:showDivFun()" rel="external nofollow" >点击这里弹出层</a>
<script>
//弹出调用的方法
function showDivFun() {
document.getElementById('popDiv').style.display = 'block';
}
//关闭事件
function closeDivFun() {
document.getElementById('popDiv').style.display = 'none';
}
</script>
</body> </html>
显示效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATcAAAEwCAIAAABdRaHdAAAIYklEQVR4nO3bTZbaRgCFUa3FE3tHvZ3MWApLYSnMPMss5yiDdhOQVD8SOH5C954aqEUhRIevS2AyfP/xbfznb8MwMsf3H98GlRpG8lCpYaQPlRpG+lCpYaQPlRpG+lCpYaQPlRpG+lCpYaSPr0qBVCqFdMuVDsPP5j1Lcyb7F6cNw8/SaB6z83F7HqvnacIfV6y0+WquvMSboZaqu23PH/dzu3Lknu3+pwA51q2lqxalyrTOom5lPnMcayl79/or3p75ndlM1s/KRuc27NF/lT7zXvF+54a1br59f5z6Wto85+ZBINxDpYszepJYDON+e+37yfrO0h+I+vnDTq2otHP//Kb5zGbqzcvjl5wn7MK6Sjvf+zXX0tLk+52lt6lrf+xc/yHWuvelayutzO/Jpv6Wsr/S0hzYhXXfPVpV6eKFbv2Y9Zs2r6U98yHW9Iq3/uLuX2/7G3im0p6r2cqCLFR24VelzVf8G48//Z8AGnzbHtKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNK9eaXDX4ax+/H+lcLeqRTSqRTSqRTSqbR692FY3C7N6TnObzqNlzwQmQ5V6fX88XG+juN4OQ2fG7P5X+73jLNXfymb2/bQ0pxWerj5j6uOI+M9OlCll9MwFOKc3uurzEpdk8mT7frMxVvnJ9A8mVXHGVW6Wweq9G4tbd3rcf3sbG8sL3qlnPorbZ6wtfSNHaPSy+nrRXt/xXs9fwzDMAynyzh+bp/uX9z1taunitvk4um1Kq0/aP9x5kdjRw5Q6fX8MZwu4+fGx/l6f+l7OX3eNI7j5Xy+brlArRTSLLmnrp6uOv9qqHSn3r/Su8vc2+Z/+26fI13O5+ssj2eWylLbmyt9fi1lp45e6a+V9no+X8Zx6TPesfVmsvTjsHTZPD5Rae1p9q2l7NT7VzpeTsOvy9pfbz4vjx8jXU7Tj34XA1vMrPLjpJPFpfVVa2nlfCY36XaPDlDp/YdHX40Ow12Z1/Pp8ZPfF66l46yNyXZzDVzMe36c0kNP7qLSPTpEpavv1eqw7v5e/89aOnmsyk72SKWP85dWm1Uv9EpU87rWHrC5f/5AKn0DKoV0KoV0KoV0KoV0KoV0KoV0KoV0KoV0Kq3efev/a9LzBaOx9dXcbd+m2Dyh/xFfeCh6vH+lte/y3YVR+irP8mGfqLT/u039L/TfVNeqE+v8PbPB+1dau7X8JfjFnf2vwvrROtfM+bT5X5bmn56ec27+Hjofq/M3yVoqrW0vvrbqL7ih/D+RVqqbvOhLO3tOr2fChqfZU/Kqk6TfISpdu4b075xPKFW6oajJTRsq7Vd59PmPnb83fb7KUSp92PlEpZXX7v2e+cK4eJf60XoqrSzI9QmTs2r+Nponc/+IpR/ZRqVdO28/9lfaP6fZ8KvW0mYwlTWw9OiTvwilw2r1GSp92Nlc6ErLVP9xFk6y72J4c6XN+f0nU3+mY2H1bj4odUepdPF1U782qy8ppTmdlS4+dL2uxUpLSsepx7N4GpVnUTnn5h3pd5RKl2/tXjnr0+p3rKyB95NLKVZuWltOPZj6XxaV/kGHqLR4a2HRaNZbOcKtqPkKWY+tp9LJMtj/16eySNafSGVCaVp9YWeDg1ZaujJsXuzNg5kEuXiQyuu1NH9+6+JGyeKZV8658luaH6rypCrPhc0OWinsiEohnUohnUohnUohnUohnUohnUoh3VEqHYaf05se98wnNI68cj5sdpRKx8euFhu77RyGn5OxuHM+pz7t9z1N3tuBKt1+kK9K73+cbC/eOj8IbHCISnvWt8oF8KosVcrLHaLShz19FdUvjyvJqZSXU+nD/tI70tuctWtycz80vX+l/Z/6PNxx61WuSnm59690uqejotLyuLjezu/bPD6scqxK51FNblqcM7/iXbzLfHvx+LDWgSrt+UCo/59bKh8C+/dSXusolTY/p111xbu4v/RA9f3Q9P6VNj89+p/Hn/6VsD/vXynsnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUoh3ftXahh7H29eKbwBlUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUK67z++/QseOq/Qz7J6fAAAAABJRU5ErkJggg==” alt=”” />
