怎么用css+js实现点击按钮弹出div层

如何用css+js实现点击按钮弹出div层
一个界面上有一个按钮btn1，点击按钮弹出一个水平垂直居中的div层1，弹出的div层1 上又有一个按钮btn2，点击btn2时候同样弹出一个水平垂直居中div层2，第一个div层关闭。
------解决思路----------------------
div层1，div层2两个div都使用绝对定位，使之水平垂直居中，默认设置display属性为none;
btn1的点击响应事件中设置div层1 display:block;
btn2的点击响应事件中设置div层1 diaplay:none,div层2display:block;
...
大体思路这样吧，应该还有挺多细节性问题，慢慢琢磨吧...
------解决思路----------------------



<head>

    <title></title>

    <style type="text/css">

    .div1{position:absolute;display:none;}

    .div2{position:absolute;display:none;}

    </style>

    <script type="text/javascript">

        function div1Show() {

            var div1 = document.getElementById("div1");

            div1.style.display = "";

        }

        function div2Show() {

            var div1 = document.getElementById("div1");

            var div2 = document.getElementById("div2");

            div1.style.display = "none";

            div2.style.display = "";

        }

    </script>

</head>

<body>

    <div id="div1" class="div1">

    </div>

    <div id="div2" class="div1">

    <input type="button" value="btn2" id="btn2" onclick="div2Show()" />

    </div>

    <input type="button" value="btn1" id="btn1" onclick="div1Show()"/>

</body>

</html>

建议自己多思考思考
------解决思路----------------------
演示代码使用了jQuery，直接复制代码的话，可能没有引用:

点击click div的时候要弹出另外一个div，第一次弹出的div关闭。不是弹出文字。源代码直接复制到我的电脑上就看不到效果了

------解决思路----------------------
你的需求是固定，不是滚动。你把div1，div2， Absolute-Center中的position都改成fixed (因为我在这div1，div2都加了class Absolute-Center，所以你可以把这两个css里的position去掉，精简一点，修改起来也方便)。
但是我上面也说了，IE6不支持fixed，安卓和苹果手机的浏览器好像有些也不支持，本来跨浏览器css固定可以用position: absolute;的，可以因为你需要绝对居中，是以使用了top,bottom,left,right都设成0，这样就没法固定了，如果垂直居中不是特别重要，可以使用在IE6设成position: absolute;margin: 0 auto;，水平居中，然后设一个合理的top值，这样就能跨浏览器了。

引用:

这两个是连着的，。我的意思是这个弹出层只显示在电脑屏幕的最开始的一页吗。到那个小组一览(截图底部)那里，然后小组一览继续往后拉，就没有弹出层了是吗？是这个效果的。。
我原本以为是弹出层随滚动条一直垂直水平居中呢。见图
我测试的跟你的是一样的效果

怎么用css+js实现点击按钮弹出div层

相关推荐