使用DIV作为弹出窗口

把下面的code放在txt文件中,然后修改为.htm就可在浏览器里面运行啦

<script>
//打开关键词窗口  

function  locking(e)  

{         

    var divLeft = e.offsetLeft;  

    var divTop = e.offsetTop;  

    while(e=e.offsetParent)     

    {     

         divLeft   +=   e.offsetLeft;       

         divTop   +=   e.offsetTop;     

    }         

    var divObj = document.getElementById("keyWordsDiv");      

    divObj.style.left = divLeft+"px";  

    divObj.style.top = divTop+20+"px";  

    divObj.style.display = "block";     

}   

//关闭关键词窗口  

function  closeSelf()  

{  

    document.all.keyWordsDiv.style.display = 'none';  

    for (var i = 0; i < 2; i++) {  

        document.getElementById("cblKeyWords_" + i).checked = false;  

    }  

    return false;        

}  

//关键词取值  

function getCheckVale()  

{  

var txtKeyWordsValue = "";  

var m=0  

for(var i=0;i<2;i++)  

{  

      if(document.getElementById("cblKeyWords_"+i).checked)  

      {  

        var idCheck =document.getElementById("cblKeyWords_"+i).id;//当前选择checkbox的ID  

	if(txtKeyWordsValue != "")
	{
    	     txtKeyWordsValue += ";" + document.getElementById("lblKeyWords_"+i).innerText; 
	}  
	else
	{   
             txtKeyWordsValue += document.getElementById("lblKeyWords_"+i).innerText; 
        }             
	
      }        

}  

document.getElementById("txtKeyWords").value=txtKeyWordsValue;  

document.all.keyWordsDiv.style.display='none';   

} 


</script>

<input ID="txtKeyWords" ID="txtKeyWords" />

<input id="imgkey" type="button" runat="server" onclick="locking(this)" class="tailBut"  value="选 择" /> 
<!--关键字-->    
<div id="keyWordsDiv" style="border: 2px solid #6FA1D9; display: none; position: absolute; top: 0px; left: 0px; width: 260px; height: 120px; z-index: 3; background-

color: #EAF1FD;">        
<div style="width: 260px; height: 20px; background-color: #6FA1D9"> <ul style="cursor: pointer; line-height: 20px;">                
<li style="float: right" onclick="getCheckVale()">[确定]</li><li style="float: right" onclick="closeSelf()">[关闭]</li></ul></div>
<div>
<input type="checkbox" id="cblKeyWords_0" value="dd" text="yy" /><span id="lblKeyWords_0">123</span>
<input type="checkbox" id="cblKeyWords_1" value="ee" text="rr" /><span id="lblKeyWords_1">456</span>
</div>
posted @ 2011-08-24 20:28  zicheng_307  阅读(289)  评论(2编辑  收藏  举报