对于层的控制，首先要考虑的就是层的开关，在日常工作中，很多地方都会用到对层的操作，使页面变得简洁。为了当用户效率更高，有时候经常不在层上做关闭按钮，直接点击层以外的部分就能关闭层，所以类似这种点击相对要转个小弯才行，其实也不难，方法有很多，下面先介绍两种通用性强、易懂的方法：
1、通过层的独立性来解决，直接看下面代码：
CODE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <style type="text/css"> body{ margin:0px; padding:0px;} #floatObj{background:#99FFFF; border:1px #006633 solid; height:100px; width:300px; line-height:100px; text-align:center; position:absolute; display:none} </style> <script type="text/javascript" language="javascript"> function setFloatobj(obj){ var bodyh = document.body.clientHeight; var bodyw = document.body.clientWidth; obj.style.top = (bodyh-obj.offsetHeight)/2; obj.style.left = (bodyw-obj.offsetWidth)/2; } function openFloatobj(obj){ obj.style.display = 'block'; setFloatobj(obj); } function closeFloatobj(obj){ obj.style.display = 'none'; } </script> </head> <body onResize="setFloatobj(floatObj)"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="top" onMouseDown="closeFloatobj(floatObj)"><input type="button" onClick="openFloatobj(floatObj)" value="弹出层"></td> </tr> </table> <div id="floatObj">这是弹出的层</div> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
2、通过标签的自定属性，代码如下：
CODE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <style type="text/css"> body{ margin:0px; padding:0px;} #floatObj{background:#99FFFF; border:1px #006633 solid; height:100px; width:300px; line-height:100px; text-align:center; position:absolute; display:none} </style> <script language="javascript" type="text/javascript"> document.onclick = eVclick; function eVclick(event){ event = (event == null)?window.event:event; var srcelement= event.target?event.target:event.srcElement; if(srcelement.getAttribute("Author")==null && srcelement != document.getElementById("but")){ closeFloatobj(document.getElementById("floatObj")); } } function setFloatobj(obj){ var bodyh = document.body.clientHeight; var bodyw = document.body.clientWidth; obj.style.top = (bodyh-obj.offsetHeight)/2; obj.style.left = (bodyw-obj.offsetWidth)/2; } function openFloatobj(obj){ obj.style.display = 'block'; setFloatobj(obj); } function closeFloatobj(obj){ obj.style.display = 'none'; } </script> </head> <body> <input type="button" onClick="openFloatobj(floatObj)" id="but" value="弹出层"> <div id="floatObj" author="outclick"><table width="100%" border="0" cellspacing="0" cellpadding="0" author="outclick"> <tr author="outclick"> <td author="outclick">这是弹出的层</td> </tr> </table> </div> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
