如何用js实现弹出选择框

shuhua2009 2009-10-26 09:23:56

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

...全文

1086 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

Keefer_Zeng 2010-10-27

打赏
举报

看一下，怎么处理

hongri520 2009-11-03

打赏
举报

学习中……

hitlcyu19 2009-10-26

打赏
举报

自己写吧

浴火_凤凰 2009-10-26

打赏
举报

用DIV模拟一个

gabriel80 2009-10-26

打赏
举报

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

BeenZ 2009-10-26

打赏
举报



<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>