JavaScript:实现弹出框的选择（转载）

1 页面元素

<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;list-style: none;">
                <li style="float: right" onclick="getCheckVale()">[确定]</li>
                <li style="float: right" onclick="closeSelf()">[关闭]</li>
            </ul>
        </div>
        <div>
            <asp:CheckBoxList ID="cblKeyWords" runat="server" RepeatColumns="2">
                <asp:ListItem>Item 1</asp:ListItem>
                <asp:ListItem>Item 2</asp:ListItem>
                <asp:ListItem>Item 3</asp:ListItem>
                <asp:ListItem>Item 4</asp:ListItem>
                <asp:ListItem>Item 5</asp:ListItem>
                <asp:ListItem>Item 6</asp:ListItem>
            </asp:CheckBoxList>
        </div>
    </div>
    <asp:TextBox ID="txtKeyWords" runat="server" ReadOnly="True" class="inp"></asp:TextBox>
    <input id="imgkey" type="button" runat="server" onclick="locking(this)" value="选 择" />

2 javaScript 脚本

2.1 打开选择Div

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"; 
}

2.2 实现选择

function getCheckVale()
{
var objCheck=document.getElementById("cblKeyWords").getElementsByTagName("input");
var objLabel = document.getElementById("cblKeyWords").getElementsByTagName("label")
var txtKeyWordsValue = "";
var m=0
for(var i=0;i<objCheck.length;i++)
{
      if(document.getElementById("cblKeyWords_"+i).checked)
      {
        var idCheck =document.getElementById("cblKeyWords_"+i).id;//当前选择checkbox的ID
        for(var j = 0;j <objLabel.length;j++)
        {
            var forvalue=objLabel[j].getAttributeNode("for").value             
            if(forvalue == idCheck)
            { 
               m+=1;
               for(var k=0;k<m;k++)
               {
               if(k==m-1)
               {
                    txtKeyWordsValue+=objLabel[j].innerHTML;
               }
               else
               {
                    txtKeyWordsValue +="|"+objLabel[j].innerHTML;
                    break;
                }
                }
            }
        }
      }    
}
document.getElementById("txtKeyWords").value=txtKeyWordsValue;
document.getElementById( "keyWordsDiv").style.display= "none";
}

2.3 关闭选择div

function  closeSelf()
{
    document.getElementById( "keyWordsDiv").style.display= "none";
    var objCheck = document.getElementById("cblKeyWords").getElementsByTagName("input");
    for (var i = 0; i < objCheck.length; i++) {
        document.getElementById("cblKeyWords_" + i).checked = false;
    }
    return false;    
}

3 效果如下：