答案： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js地区选择</title> <style> * {margin:0;} body {font-size:12px;} #container div{margin-top:5px;} #select_city h3{float:left;} #main_city,#all_province {clear:both;} #main_city div,#all_province div{width:600px;clear:left;} #main_city h4,#all_province h4{float:left;display:inline;font-size:16px;} #main_city div span,#all_province div span{margin:0 10px;cursor:pointer;font-size:12px;} #float_lay{width:200px;height:120px;border:1px #d1d1d1 solid;position:absolute;background:#fff;z-index:999;display:none;} </style> <script type="text/javascript"> //弹出层 function openLayer() { //创建一个div元素 var popupDiv = document.createElement("div"); //给这个元素设置属性与样式 popupDiv.setAttribute("id","popupAddr") popupDiv.style.border = "1px solid #ccc"; popupDiv.style.width = "600px"; popupDiv.style.height = "400px"; popupDiv.style.background = "#fff"; popupDiv.style.zIndex = 99; popupDiv.style.position = "absolute"; //让弹出层在页面中垂直左右居中 var arrayPageSize = getPageSize(); var arrayPageScroll = getPageScroll(); //alert(arrayPageScroll); //alert(arrayPageSize); popupDiv.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - 400) / 2) + 'px') ; popupDiv.style.left = (((arrayPageSize[0] - 20 - 600) / 2) + 'px'); //创建背景层 var bodyBack = document.createElement("div"); bodyBack.setAttribute("id","bodybg") bodyBack.style.width = "100%"; bodyBack.style.height = (arrayPageSize[1] + 35 + 'px'); bodyBack.style.zIndex = 98; bodyBack.style.position = "absolute"; bodyBack.style.top = 0; bodyBack.style.left = 0; bodyBack.style.filter = "alpha(opacity=20)"; bodyBack.style.opacity = 0.2; bodyBack.style.background = "#000"; //收工插入到目标元素之后 var mybody = document.getElementById("test"); insertAfter(popupDiv,mybody); insertAfter(bodyBack,mybody); //弹出层内容 popupDiv.innerHTML = addrHTML(); init_check(); init_check_event(); } //元素插入另一个元素之后 function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if(parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement, targetElement.nextSibling); } } //获取滚动条的高度 function getPageScroll(){ var yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict yScroll = document.documentElement.scrollTop; } else if (document.body) {// all other Explorers yScroll = document.body.scrollTop; } arrayPageScroll = new Array('',yScroll) return arrayPageScroll; } //获取页面实际大小 function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageSize; } //关闭弹出层 function closeLayer(obj) { obj.style.display = "none"; document.getElementById("bodybg").style.display = "none"; return false; } //拖动函数 function mousedown(e) { var obj = document.getElementById("popupAddr"); var e = window.event ? window.event : e; obj.startX = e.clientX - obj.offsetLeft; obj.startY = e.clientY - obj.offsetTop; document.onmousemove = mousemove; var temp = document.attachEvent ? document.attachEvent("onmouseup",mouseup) : document.addEventListener("mouseup",mouseup,""); } function mousemove(e) { var obj = document.getElementById("popupAddr"); var e = window.event ? window.event : e; with(obj.style) { left = e.clientX - obj.startX + "px"; top = e.clientY - obj.startY + "px"; } } function mouseup(e) { document.onmousemove = ""; var temp = document.detachEvent ? document.detachEvent("onmouseup",mouseup) : document.addEventListener("mouseup",mouseup,""); } //END拖动函数 //弹出层内容 function addrHTML() { //文字 var TITLE = "请选择工作地点 你最多能选择 5 项"; var CLOSE = '<span style="cursor:pointer;" onclick="javascript:closeLayer(this.parentNode.parentNode.parentNode.parentNode);write_result();">[确定]</span>'; //图片地址 var TITLEBG = "http://www.qqdang.net/code/title_bg.gif"; var ICN = "http://www.qqdang.net/code/icn.gif"; var htmlDiv = ''; htmlDiv += '<div style="width:100%;font-size:12px;">'; //头部 htmlDiv += '<div style="background:url('+TITLEBG+') repeat-x;height:40px;color:#fff;cursor:move;" onmousedown="mousedown(arguments[0])">'; htmlDiv += '<span style="line-height:30px;padding-left:22px;float:left;background:url('+ ICN +') no-repeat 6px 8px;">'; htmlDiv += TITLE; htmlDiv += '</span>'; htmlDiv += '<span style="float:right;padding-right:12px;line-height:30px;">'; htmlDiv += CLOSE; htmlDiv += '</span>'; htmlDiv += '</div>'; //END头部 //内容部分 htmlDiv += '<div id="container" style="width:600px;height:400px;"></div>'; htmlDiv += '<div id="float_lay"></div>'; //END内容部分 htmlDiv += '</div>'; return htmlDiv; } //工作地点键值匹配数组 var ja=[]; ja['0100']='北京市'; ja['0200']='上海市'; ja['0300']='广东省';ja['0302']='广州市';ja['0303']='惠州市';ja['0304']='汕头市';ja['0305']='珠海市';ja['0306']='佛山市';ja['0307']='中山市';ja['0308']='东莞市';ja['0310']='从化市';ja['0314']='韶关市';ja['0315']='江门市';ja['0316']='增城市';ja['0317']='湛江市';ja['0318']='肇庆市';ja['0319']='清远市';ja['0320']='潮州市';ja['0321']='河源市';ja['0322']='揭阳市';ja['0323']='茂名市';ja['0324']='汕尾市';ja['0325']='顺德市'; ja['0400']='深圳市'; ja['0500']='天津市'; ja['0600']='重庆市'; ja['0700']='江苏省';ja['0702']='南京市';ja['0703']='苏州市';ja['0704']='无锡市';ja['0705']='常州市';ja['0706']='昆山市';ja['0707']='常熟市';ja['0708']='扬州市';ja['0709']='南通市';ja['0710']='镇江市';ja['0711']='徐州市';ja['0712']='连云港市';ja['0713']='盐城市';ja['0714']='张家港市'; ja['0800']='浙江省';ja['0802']='杭州市';ja['0803']='宁波市';ja['0804']='温州市';ja['0805']='绍兴市';ja['0806']='金华市';ja['0807']='嘉兴市';ja['0808']='台州市';ja['0809']='湖州市';ja['0810']='丽水市';ja['0811']='舟山市';ja['0812']='衢州市'; ja['0900']='四川省';ja['0902']='成都市';ja['0903']='绵阳市';ja['0904']='乐山市';ja['0905']='泸州市';ja['0906']='德阳市';ja['0907']='宜宾市';ja['0908']='自贡市';ja['0909']='内江市';ja['0910']='攀枝花市'; ja['1000']='海南省';ja['1002']='海口市';ja['1003']='三亚市'; ja['1100']='福建省';ja['1102']='福州市';ja['1103']='厦门市';ja['1104']='泉州市';ja['1105']='漳州市';ja['1106']='莆田市';ja['1107']='三明市';ja['1108']='南平市';ja['1109']='宁德市';ja['1110']='龙岩市'; ja['1200'</pre><p>上一个：<a href="/show/6e3f1bdc8b58c536.htm">javascript 字符串连接的性能问题(多浏览器)</a><br/>下一个：<a href="/show/3227ca4e8c00bb88.htm">JS清空上传控件input(type="file")的值的代码第1/2页</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/3cc77106220dd2d0.htm"><img src='/upload/2013111520/20110929091418965.bmp' width=105 height=105><br/>鼠标移动到图片名上，显示图片----js研究(1)</a></li><li><a href="/show/340a2f518526a6f6.htm"><img src='/upload/20137/5/20130705140432389.jpg' width=105 height=105><br/>img标签中图片加载失败onerror用法优化和参数</a></li><li><a href="/show/bcdd9b2f49161be9.htm"><img src='/upload/2013111520/20120509112313230.png' width=105 height=105><br/>HTML5利用json对象来存取复杂数据</a></li><li><a href="/show/e6c093cd575c805d.htm"><img src='/upload/20121013/2007310134928412.jpg' width=105 height=105><br/>可缩放Reloaded-一个针对可缩放元素的复用组件</a></li><li><a href="/show/0fd50a7b1a9c1493.htm"><img src='/upload/2013111604/20110609152501802.gif' width=105 height=105><br/>在jsp中用bean和servlet联合实现用户注册、登录</a></li><li><a href="/show/329e23a892e31042.htm"><img src='/upload/2013111519/20121203111654125.jpg' width=105 height=105><br/>Extjs中动态生成树</a></li></ul></div></div> <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/7_1.htm">JS</a>疑问解答：</dt><dd><a target="_blank" href="/show/31f300d314d4c0d3.htm">几个验证11位手机号码格式的js代码</a></dd><dd><a target="_blank" href="/show/7d909e714c0774e2.htm">js如何获得FCKeditor控件的值</a></dd><dd><a target="_blank" href="/show/b4327bdd4ebbebcb.htm">用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...</a></dd><dd><a target="_blank" href="/show/cbcc4d7336496819.htm">JS验证，这块“牛皮”反复修改都不能实现</a></dd><dd><a target="_blank" href="/show/cb91bc419542ce9f.htm">在JS中使用DOM模型</a></dd><dd><a target="_blank" href="/show/897f78948b91f031.htm">如何用JS 获取本地文件夹的文件列表</a></dd><dd><a target="_blank" href="/show/58cf22df63d3344a.htm">js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？</a></dd><dd><a target="_blank" href="/show/b1e97b258c9ed0b3.htm">求实现自动生成图片缩略图的JS代码</a></dd><dd><a target="_blank" href="/show/59e5b8e1f4421028.htm">JS脚本网页问题</a></dd><dd><a target="_blank" href="/show/2c3f71b731258761.htm">js，代码中"object"和"Object"区别？</a></dd><dd><a target="_blank" href="/show/b281b7d5eabf3339.htm">js+flash实现网页图片切换效果，出现边框，单击激活此控件。</a></dd><dd><a target="_blank" href="/show/3aa8e41c89689f54.htm">JS怎样操作PHP中的参数</a></dd><dd><a target="_blank" href="/show/b4b8714c029b37a6.htm">js 怎么在一打开页面就加载这个函数。</a></dd><dd><a target="_blank" href="/show/8c57097425b52fc7.htm">Date.parse()的问题(js)</a></dd><dd><a target="_blank" href="/show/012152bfb53fdf04.htm"><script src="/{maxcms:sitepath}js/common.js"></script>是什么意思</a></dd></dl></div> </div> <div id="zykleft"> <div class="leftm"> <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a> <div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div> <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div> <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>请访问www.zzzyk.com 试试</dl> </div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div> </div></div> <div class="clear"></div> <div class="bdshare"> <script type="text/javascript" src="/js/share.js"></script> </div> <div class="clear"></div> <div class="foot">CopyRight © 2012 站长网 编程知识问答 <a href="http://www.zzzyk.com">www.zzzyk.com</a> All Rights Reserved<br/>部份技术文章来自网络，<script type="text/javascript" src="/images/my.js"></script> </div> </body> </html>