js点击弹出悬浮表单

JavaScript012

js点击弹出悬浮表单,第1张

表单的位置大小需要你用CSS设计。以下代码只是实现了你要的弹出功能。

<!DOCTYPE html>

HTML模板

<br /> form{<br /> position:absolute<br /> left:100px<br /> top:50px<br /> width:400px<br /> height:300px<br /> border:1px solid #aaaaaa<br /> }<br />

<br /> var t<br /> function closeForm(){<br /> var form=document.getElementById("form")<br /> form.style.display="none"<br /> }<br /> function showForm(){<br /> var form=document.getElementById("form")<br /> form.style.display="block"<br /> window.clearTimeout(t)<br /> }<br /> function timer(){<br /> t=window.setTimeout(showForm,10000)<br /> }<br />

<html>

<head>

<meta name="GENERATOR" content="Microsoft FrontPage 6.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>new page</title>

<script type="text/javascript" language="javascript">

function crertdiv(_parent,_element,_id,_css){//创建层

var newObj = document.createElement(_element)

if(_id &&_id!="")newObj.id=_id

if(_css &&_css!=""){

newObj.setAttribute("style",_css)

newObj.style.cssText = _css

}

if(_parent &&_parent!=""){

var theObj=getobj(_parent)

var parent = theObj.parentNode

if(parent.lastChild == theObj){

theObj.appendChild(newObj)

}

else{

theObj.insertBefore(newObj, theObj.nextSibling)

}

}

elsedocument.body.appendChild(newObj)

}

function getobj(o){//获取对象

return document.getElementById(o)

}

var swtemp=0,objtemp

function showdiv(inputid,inputlist){//显示层

if (swtemp==1){getobj(objtemp+"mydiv").style.display="none"}

var text_list=inputlist.split(",")

if (!getobj(inputid+"mydiv")){//若尚未创建就建之

var divcss="font-size:12pxcolor:#00fposition:absoluteleft:"+(getobj(inputid).offsetLeft+0)+"pxtop:"+(getobj(inputid).offsetTop+25)+"pxborder:1px solid red"

crertdiv("","div",inputid+"mydiv",divcss)//创建层"mydiv"

//alert(document.getElementById("mydiv").outerHTML)

crertdiv(inputid+"mydiv","ul",inputid+"myul")//创建ul

for (var i=0,j=text_list.lengthi<ji++){//创建"text_list"li

crertdiv(inputid+"myul","li",inputid+"li"+i,"background:#fff")

getobj(inputid+"li"+i).innerHTML=text_list

}

crertdiv(inputid+"myul","li",inputid+"li"+j,"color:#f00background:#fff")//创建"clear"li

getobj(inputid+"li"+j).innerHTML="clear"

getobj(inputid+"mydiv").innerHTML +="<style type='text/css'>#"+inputid+"mydiv ul {padding:0pxmargin:0}#"+inputid+"mydiv ul li{list-style-type:nonepadding:5pxmargin:0float:leftCURSOR: pointer}</style>"

for (var i=0i<=ji++){

getobj(inputid+"li"+i).onmouseover=function(){this.style.background="#eee"clearTimeout(timer)}

getobj(inputid+"li"+i).onmouseout=function(){this.style.background="#fff"}

}

}

var newdiv=getobj(inputid+"mydiv")

newdiv.onclick=function(){hiddiv(event,inputid)}

newdiv.onmouseout=function(){Mout(this)}

newdiv.onmouseover=function(){clearTimeout(timer)}

getobj(inputid).onmouseout=function(){Mout(newdiv)}

newdiv.style.display="block"

swtemp=1

objtemp=inputid

}

var timer

function Mout(o){

timer=setTimeout(function(){o.style.display="none"},300)

swtemp=0

}

function hiddiv(e,inputid){

e=e||window.event

ev=e.target||e.srcElement

v=ev.innerText||ev.textContent

if (v!="clear")getobj(inputid).value=velse getobj(inputid).value=""

getobj(inputid+"mydiv").style.display="none"

}

</script>

</head>

<body>

<br>

<br>

<br>

<br>

....利用定义标签赋值....(onclick)....<input id="mytext" type="text"onclick="showdiv(this.id,this.list)" list="文本框,弹出层,值赋"/>

<br>

<br>

<script>

var list="文本框2,弹出层2,值赋2,文本框2-1,弹出层2-1,值赋2-1"

</script>

....利用定义JS变量赋值...(onclick)....<input id="mytext2" type="text" onClick="showdiv(this.id,list)"/>

<input type="hidden" value="点击,弹出,显示,消失,实现" id="list">

....利用隐藏域值赋值....(onmouseover).....<input id="mytext3" type="text" onMouseOver="showdiv(this.id,getobj('list').value)"/>

</body>

</html>