如何用js实现弹出选择框

弹出一个类似alert的窗口，上面有三个按钮，名称分别为“选项1”，“选项2”，“选项3”。
请问如何实现？

解决方案 »

  1.   


    <script type="text/javascript">
        var docEle = function()
        {
            return document.getElementById(arguments[0]) || false;
        }    function openNewDiv(_id)
        {
            var m = "mask";
            if (docEle(_id)) document.body.removeChild(docEle(_id));
            if (docEle(m)) document.body.removeChild(docEle(m));
            //新弹出层        var newDiv = document.createElement("div");
            newDiv.id = _id;
            newDiv.style.position = "absolute";
            newDiv.style.zIndex = "9999";
            newDivWidth = 400;
            newDivHeight = 200;
            newDiv.style.width = newDivWidth + "px";
            newDiv.style.height = newDivHeight + "px";
            newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
            newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
            newDiv.style.background = "#EFEFEF";
            newDiv.style.border = "1px solid #860001";
            newDiv.style.padding = "5px";
            newDiv.innerHTML = " ";
            document.body.appendChild(newDiv);        //弹出层滚动居中        function newDivCenter()
            {
                newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
                newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
            }
            if(document.all)
            {
                window.attachEvent("onscroll",newDivCenter);
            }
            else
            {
                window.addEventListener('scroll',newDivCenter,false);
            }        //关闭新图层和mask遮罩层
            var newA = document.createElement("button");
            var newB = document.createElement("button");
            var newC = document.createElement("button");
            newA.value ="选项一";
            newB.value ="选项二";
            newC.value ="选项三";
            newDiv.appendChild(newA);
            newDiv.appendChild(newB);
            newDiv.appendChild(newC);
             var br = document.createElement("br");
             newDiv.appendChild(br);
            var newOK = document.createElement("button");
            newOK.value ="关闭";
            newOK.onclick = function(){
                if(document.all)
                {
                    window.detachEvent("onscroll",newDivCenter);
                }
                else
                {
                    window.removeEventListener('scroll',newDivCenter,false);
                }
                document.body.removeChild(docEle(_id));            return false;
            }
            newDiv.appendChild(newOK);
        }
    </script>
    <body>    <a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">模拟alert点这里</a>
    </body>
      

  2.   

    好丑。。好不如弹出一个tabpanel要好看的多