页面 弹出div 怎么写

页面上有一个button   一个div  
当点击button时，div在页面当中显示  ，需要具体代码  。谢谢 。

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    html, body{
    font-size:12px; margin:0px; padding:0px;
    }
    </style>
    <script type="text/javascript">
    function show(){
    var width = Math.max(document.body.clientWidth, document.documentElement.clientWidth);
    var height = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    var layer = document.getElementById("layer1");
    layer.style.display = "block";
    layer.style.left = (width - layer.offsetWidth) / 2 + "px";
    layer.style.top = (height - layer.offsetHeight) / 2 + "px";
    }
    </script>
    </head><body>
    <div id="layer1" style="display:none;position:absolute; width:300px; height:200px; border:1px solid #ccc; background:#F8F8F8;">测试</div>
    <input type="button" value="显示" onclick="show()" />
    </body>
    </html>
      

  2.   


    <script type="text/javascript">
    window.onload=function(){
        var obj=document.getElementById("div1");
        div1.style.position = "absolute";
        div1.style.display = "none";
        div1.style.width = "100";
        div1.style.height = "100";
    }
    window.onresize=function(){
        var obj=document.getElementById("div1");
        div1.style.left = (document.body.clientWidth - parseInt(div1.style.width)) / 2 + "px";
        div1.style.top = (document.body.clientHeight - parseInt(div1.style.height)) / 2 + "px";
    }
    function show(){
        var obj=document.getElementById("div1");
        div1.style.display = "";
        div1.style.left = (document.body.clientWidth - parseInt(div1.style.width)) / 2 + "px";
        div1.style.top = (document.body.clientHeight - parseInt(div1.style.height)) / 2 + "px";
        div1.style.background = "#EEE";
        div1.style.border = "1px solid #AAA";
    }
    </script><div id="div1"> </div>
    <input type="button" value="show" onclick="show()">
      

  3.   

    其实就是div的display 属性修改就行了