您的位置：首页 > 编程语言

两个常用的DIV弹出层效果代码

2011-08-26 16:23 375 查看
有时候我们想让div遮挡整个页面，页面可能出现滚动条，也可能不出现，页面有可能是html或者xhtml，这个方法可以通杀这些情况，而且根据你的要求，是盖整个页面，或者可视部分，在兼容性方面支持ie6-8、ff3.0-3.6、chrome、safari……浏览器等。

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

<title>DIV弹出层</title>

<meta charset="gbk" />

<style>

        div{

            position:absolute;

            top:0;

            left:0;

            background:#ccc;

        }

    </style>

</head>

<body>

    <div id="test"></div>

<input onclick="test1()" type="button" value="盖住整个页面"/>

<input onclick="test1(1)" type="button" value="盖住可视的部分"/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</body>

</html>

    <script>

        function test1(f){

            var d = document.getElementById('test'),wh = getWH(f);

            d.style.cssText +=";width:"+wh.w+'px;height:'+wh.h+'px'

        }

        var getWH = function (){

            var d = document,doc = d[d.compatMode == "CSS1Compat"?'documentElement':'body'];

            return function(f){

                return {

                    w:doc[(f?'client':'scroll')+'Width'],

                            h:f?doc.clientHeight:Math.max(doc.clientHeight,doc.scrollHeight)

                }

            }

        }()

    </script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  div xhtml function button safari scroll
相关文章推荐
新的分享
章节导航