````555````老板一定要做个象51JOB那种选择工作地点的东西
谁知道51job那种选择地址怎么实现的 主要是不知道怎么能按下弹出了窗口 然后后面的WEB页面就用层灰色的引藏了(也不可以操作了,是不是有个什么CSS层)`?
`````
救命~! 最好给个例子程序啊`!.
100分给救命者~~~~~
------解决方案--------------------
是modalpopup吧,很多ajax库都有的
------解决方案--------------------
直接用层就可以
------解决方案--------------------
用ajax做的,你看看51的souce code呢,多少有点启发
------解决方案--------------------
给个例子,数据你自己加就是了,直接保存html就可以运行
- HTML code
<!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>无标题文档</title><style> body{margin:0;padding:0;} #topFill{display:none;text-align:center;position:absolute;z-index = 999;filter:alpha(opacity=50);background-color:#eee;opacity: 0.5;-moz-opacity: 0.5;width:100%;} #alertBox{margin:auto;height:150px;width:300px;background-color:#cf0;text-align:left;border:1px solid #666} #alertTitle{height:20px;background-color:#EDF8B8;line-height:20px;padding:0 10px;border-bottom:1px solid #71860D} #alertContent{padding:42px 0;;text-align:center;} #alertBtn{text-align:center;} #alertBtn input{margin:0 10px;background:#FFFF99;border:1px solid #fff;height:20px;line-height:20px;}</style><script type="text/javascript" >//document.documentElement.clientHeight+'px'// onload的时候声明对象var obj = new Object;function oload(){ obj = document.getElementById('topFill'); obj.style.display = 'none';}function cl(){ document.body.style.overflow = 'hidden'; document.body.style.height = document.documentElement.clientHeight + 'px'; obj.style.display = 'block'; obj.style.height = document.documentElement.clientHeight + 'px';}function bcl(){ document.body.style.overflow = ''; obj.style.display = 'none';}function oresize(){ if(obj.style.display != 'block'){ }else{ cl(); }}function isno(str){ if (str == 'yes'){ window.close(); }else { bcl(); }}</script></head><body onload="oload()" onresize="oresize()"><div id="topFill"> <div id="alertBox"> <div id="alertTitle">请选择要选择的区域!</div> <div id="alertContent"><table border="1"><td>北京 上海 南京 沈阳</td></table></div> <div id="alertBtn"><input type="button" value="是(Y)" onclick="isno('yes')" /><input type="button" value="否(N)" onclick="isno('no')" /></div> </div></div><input type="text" id="textaaa" /><input type="button" value="选择区域" onclick="cl()"/></body></html>
------解决方案--------------------
没有用ajax的实现方法,unload页面之后该层也会消失,如果在加载新页面时间很长时仍旧会有空白时间,要解决可能需要用ajax没有作过,有人作过可以贴上来哈
.submit();前调用showLoadingBar();
- JScript code
function showLoadingBar(){ var Br = new innerMessageBox(); Br.ShowModal( 250, 30);}function innerMessageBox(){ var BackObject, FormObject; // 检查页面中是否存在该控件. function checkIMBObject(){ if (document.getElementById("imb_Background")==null && document.getElementById("imb_FormModal")==null){ document.body.innerHTML += "<iframe id=\"imb_Background\" src=\"about:blank\" style=\"position:absolute;left:0;top:0;width:0px;height:0px;visibility:hidden; \" frameborder=no border=0></iframe>" + "\r\n<iframe id=\"imb_FormModal\" src=\"about:blank\" style=\"position:absolute;left:0;top:0;width:0px;height:0px;visibility:hidden;border-style:solid;border-width:1px; border-color:#3399FF\" frameborder=\"0\" ></iframe>"; window.imb_Background.document.open(); window.imb_Background.document.write("<html></html>"); window.imb_Background.document.close(); window.imb_FormModal.document.open(); window.imb_FormModal.document.write("<html>"); window.imb_FormModal.document.write("<head></head>"); window.imb_FormModal.document.write("<body style=\"position:absolute;padding:7px 9px 2px 50px\" scroll=\"no\" leftmargin=0 topmargin=0 style=\"background-color:#FFFFCC; font-size: 9pt; font-FAMILY: \"宋体\";\">"); window.imb_FormModal.document.write("<tr><td>"); window.imb_FormModal.document.write("<img src=\"/web/images/loading.gif\" align=\"absmiddle\"/>"); window.imb_FormModal.document.write(" 處理中..."); window.imb_FormModal.document.write("</td></tr>"); window.imb_FormModal.document.write("</body>"); window.imb_FormModal.document.write("</html>"); window.imb_FormModal.document.close(); } } // 显示对话框控件. this.ShowModal = function( iWidth, iHeight){ var smWidth = 250, smHeight = 30, smObject, smAlpha = 0, smInterval; if (arguments.length > 4 ){ smWidth = iWidth; smHeight = iHeight; } //渐显. function checkIMBAlpha(){ smObject.style.filter = "alpha(opacity="+smAlpha+");"; smAlpha += 10; if (smAlpha>80){ clearInterval(smInterval); } } checkIMBObject(); this.BackObject = document.getElementById("imb_Background"); this.FormObject = document.getElementById("imb_FormModal"); smObject = this.BackObject; smAlpha = 0; this.BackObject.style.left = 0; this.BackObject.style.top = 0; this.BackObject.style.width = document.body.scrollWidth; this.BackObject.style.height = document.body.scrollHeight; checkIMBAlpha(); this.BackObject.style.visibility = "visible"; smInterval = window.setInterval(checkIMBAlpha, 5); //if( document.body.scrollHeight > document.body.clientHeight) //{ this.FormObject.style.left = document.body.clientWidth/2 - smWidth/2; this.FormObject.style.top = document.body.scrollTop + (document.body.clientHeight- smHeight - window.parent.frames[0].document.body.clientHeight - window.parent.frames[1].document.body.clientHeight)/2; //}else{ // this.FormObject.style.left = document.body.clientWidth/2 - smWidth/2; // this.FormObject.style.top = document.body.clientHeight/2 - smHeight/2; //} this.FormObject.style.width = smWidth; this.FormObject.style.height = smHeight; this.FormObject.style.visibility = "visible"; //document.body.scroll="no"; }}