教程集 www.jiaochengji.com
首页
|
golang教程
|
脚本编程
|
数据库
|
服务器技术
|
操作系统
|
建站教程
Golang 教程
教程集
>
脚本编程
>
javascript
> 正文 弹出层且可以拖动与增加选项
弹出层且可以拖动与增加选项
发布时间：2023-06-08 编辑：jiaochengji.com
教程集为您提供弹出层且可以拖动与增加选项等资源，欢迎您收藏本站，我们将为您提供最新的弹出层且可以拖动与增加选项资源
提示：您可以先修改部分代码再运行
<!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>51Job Alert效果</title> <script language="javascript"> //copy by gyct 20071001 var IMGPATH = '/'; var form=''; var php_bgPicture = "orangebg.gif"; var php_arrow = "orangearrow.gif"; var php_bgColor = "#FF831F"; var objX = 0; var objY = 0; var bodyScrollWidth=0; var bodyScrollHeight=0; var screenAvailWidth=window.screen.availWidth; var screenAvailHeight=window.screen.availHeight; var bdMvEvt; var bdUpEvt; function recoverBodyEvent() { document.body.onmousemove = bdMvEvt; document.body.onmouseup = bdUpEvt; } if(navigator.appName.indexOf("Explorer") > -1){//ie var exp=1; } else{//for ff var exp=2; } var layer=new Array(); var dragObj; var dragObjId; reCalBodySize(); function reCalBodySize(){ bodyScrollWidth=document.documentElement.scrollWidth; bodyScrollHeight=document.documentElement.scrollHeight; } function checkAndResetStyleTop (obj) { var clientHeight=obj.firstChild.clientHeight; var styleTop=parseInt(obj.style.top.substring(0,obj.style.top.length-2)); if ( clientHeight styleTop>bodyScrollHeight ) { obj.style.top=(bodyScrollHeight- clientHeight) 'px'; } } function set_div_style(obj,id,top,left,width,height,position,border,cursor,background) { var obj = obj; obj.id = id?id:null; obj.style.top = top?top:'0px'; obj.style.left = left?left:'0px'; obj.style.width = width?width:'0px'; obj.style.height = height?height:'0px'; obj.style.position = position?position:"static"; obj.style.border = border?border:"1px #000 solid"; obj.style.cursor = cursor?cursor:"default"; obj.style.background = background?background:""; return obj } function drag_mouse_down(event,obj){ var obj_left = obj.style.left; var obj_top = obj.style.top; var obj_left = obj_left.replace(/p|x/g,""); var obj_top = obj_top.replace(/p|x/g,""); if ( event == null ) {//IE必须 event=window.event; } var clientX = String(event.clientX).replace(/p|x/g,""); var clientY = String(event.clientY).replace(/p|x/g,""); objX = clientX - obj_left; objY = clientY - obj_top; } function drag(event,obj){ if( objX != 0 && objY != 0 ) { if ( event == null ) {//IE必须 event=window.event; } if ( event.button == 1 || event.button == 0 ){ var objWidth=obj.firstChild.clientWidth; var objHeight=obj.firstChild.clientHeight; reCalBodySize(); var leftPo= event.clientX-objX; if ( leftPo < 0 ) { leftPo=0; } if ( leftPo > bodyScrollWidth-objWidth ) { leftPo=bodyScrollWidth-objWidth; } var topPo=event.clientY-objY; if ( topPo < 0 ) { topPo=0; } if ( topPo > bodyScrollHeight-objHeight ) { topPo=bodyScrollHeight-objHeight; } obj.style.left=leftPo 'px'; obj.style.top=topPo 'px'; } } } function GetLength(strTemp){ var i,sum; sum=0; for(i=0;i<strTemp.length;i ){ if ((strTemp.charCodeAt(i)>=0) && (strTemp.charCodeAt(i)<=255)) sum = sum 1; else sum=sum 2; } return sum; } function subStringPro(str, length){ var stri = ''; for(i=0,j=0; j<length;){ if ((str.charCodeAt(i)>=0) && (str.charCodeAt(i)<=255)) { stri = str.charAt(i); j ; } else { stri = str.charAt(i); j = 2; } i ; } return stri; } //********************* //隐藏元素 function HideElement(strElementTagName){ try{ for(i=0;i<window.document.all.tags(strElementTagName).length; i ){ var objTemp = window.document.all.tags(strElementTagName)[i]; objTemp.style.visibility = "hidden"; } }catch(e){ alert(e.message); } } //显示元素 function ShowElement(strElementTagName){ try{ for(i=0;i<window.document.all.tags(strElementTagName).length; i ){ var objTemp = window.document.all.tags(strElementTagName)[i]; objTemp.style.visibility = "visible"; } }catch(e){ alert(e.message); } } function hideElementAll(){ HideElement("SELECT"); HideElement("OBJECT"); HideElement("IFRAME"); } function showElementAll(){ ShowElement("SELECT"); ShowElement("OBJECT"); ShowElement("IFRAME"); } //滤镜效果 function hide() { synSizeByBody("globalDiv"); document.getElementById("globalDiv").style.display = "block"; if ( 1 == exp ) { hideElementAll(); } } function cancel() { document.getElementById("globalDiv").style.display = "none"; if ( 1 == exp ) { showElementAll(); } recoverBodyEvent(); } function buildGlobalDiv(){ var globalDiv=document.createElement('div'); globalDiv.id='globalDiv'; globalDiv.style.display='none'; globalDiv.style.zIndex='98'; globalDiv = set_div_style(globalDiv,'globalDiv','0px','0px',bodyScrollWidth 'px',bodyScrollHeight 'px',"absolute"," #333333 0px solid","default","darkgray"); if ( 1 == exp ) { globalDiv.style.filter="alpha(opacity=30)"; } else { globalDiv.style.opacity=30/100; } document.body.appendChild(globalDiv); } function synSizeByBody() { reCalBodySize(); var argArr=synSizeByBody.arguments; for ( var i=0;i<argArr.length;i ) { if ( document.getElementById(argArr[i]) != null ) { document.getElementById(argArr[i]).style.width = (bodyScrollWidth) 'px'; document.getElementById(argArr[i]).style.height = (bodyScrollHeight) 'px'; } } } //将悬浮层的位置定位在body可见区域中央 function GetCenterXY_ForLayer(objdiv){ objdiv.style.display='block'; var styleWidth=objdiv.style.width.substring(0,objdiv.style.width.length-2); var clientHeight=objdiv.clientHeight; var objLeft = parseInt(document.documentElement.scrollLeft (document.documentElement.clientWidth - styleWidth)/2) 'px'; var relTop=(document.documentElement.clientHeight-clientHeight)/2 > 0 ? (document.documentElement.clientHeight-clientHeight)/2:0; var objTop = parseInt(document.documentElement.scrollTop relTop) 'px'; objdiv.style.top = objTop; objdiv.style.left = objLeft; checkAndResetStyleTop(objdiv); } //************************************************************ function $(str) {//通过对象ID返回对象 if (typeof str == 'string' && document.getElementById(str) != null ) { return document.getElementById(str); } return false; } function buildDiv(myLayerID){ dragObjId=document.getElementById(myLayerID); dragObjId.style.visibility='hidden'; dragObjId.style.zIndex='999'; var styleWidth=dragObjId.firstChild.clientWidth 'px'; var styleHeight=dragObjId.firstChild.clientHeight 'px'; var layerId = myLayerID; dragObjId = set_div_style(dragObjId,layerId,'0px','0px',styleWidth,'0px',"absolute","0px solid #c0d4db","default","#fff"); dragObj=dragObjId.firstChild; dragObj.style.cursor='move'; dragObj.onmousedown = function(event){drag_mouse_down(event,this.parentNode)}; dragObjId.onselectstart=function(){return false}; if ( 1 == exp ) { dragObjId.firstChild.onresize=function(){checkAndResetStyleTop(this.parentNode)}; } else { dragObjId.firstChild.onclick=function(){checkAndResetStyleTop(this.parentNode)}; } } function hiddenLayerOther(layerID){ for( var i=0;i<dragObjId.length;i ){ if ( dragObjId[i] != layerID && document.getElementById(dragObjId[i]) != null ) { hiddenLayer(dragObjId[i]); } } } function displayLayer(layerID){ buildDiv(layerID); if ( document.getElementById(layerID) != null){ var dv = document.getElementById(layerID); //hiddenLayerOther(layerID); if ( dv.style.visibility == "hidden" ) { GetCenterXY_ForLayer(dv); dv.style.visibility = "visible"; } document.body.onmousemove = function (event){drag(event,dv)}; document.body.onmouseup = function(){objX = 0;objY=0}; } return false; } function hiddenLayer(){ var argArr = hiddenLayer.arguments; for(var i=0;i<argArr.length;i ){ if ( document.getElementById(argArr[i])!=null ) { if ( argArr[i] == 'popupArea' ) { //document.getElementById('sub_' argArr[i]).innerHTML=''; //document.getElementById('tr_sub_' argArr[i]).style.display='none'; } document.getElementById(argArr[i]).style.visibility = "hidden"; } } } </script> </head> <body> <div style="height:1000px"> <input id="btnSltArea" type="button" name="btnSltArea" value="工作地点" onclick="hide();displayLayer('popupArea')" class="anbg1" style="BACKGROUND-COLOR: #ffefe2;cursor:pointer"/><input type="hidden" name="jobarea" value=""/> <form id="form1" name="form1" method="post" action=""> <div id="popupArea" style="visibility:hidden; background:#0000FF; position:absolute;"> <div style="width:200px; height:20px; background:#FF00FF">可以拖动</div> <div onclick="javascript:cancel();hiddenLayer('popupArea')">关 闭</div> <input type="button" onclick="$('sub_popupArea').innerHTML ='aaaaaaaaaaaaaaaaaaa<br/>'" name="Submit" value="增加内容" /> a<br/> a<br/> a<br/> a<br/> a<br/> a<br/> <form id="form2" name="form2" method="post" action=""> <input type="text" name="textfield" /> </form> a<br/> <div id="sub_popupArea"></div> </div> <p> <select name="select"> <option value="aa">aaa</option> </select> </p> <p> </p> <p> </p> <p> <textarea name="textarea">
.
