浮动DIV

最新推荐文章于 2022-04-14 16:32:07 发布

maypol

最新推荐文章于 2022-04-14 16:32:07 发布

阅读量340

点赞数

分类专栏： css js 文章标签： div button function xhtml input filter

本文链接：https://blog.csdn.net/maypol/article/details/5380713

版权

js 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

<!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>Untitled Page</title>
</head>
<script type="text/javascript">
function show()
{
    var back = document.getElementById("DivBack");
    var clientWidth, clientHeight;

    if(navigator.userAgent.indexOf(' MSIE ') > -1)
    {
        clientWidth = document.documentElement.clientWidth;
        clientHeight = document.documentElement.clientHeight;
    }
    else if (navigator.userAgent.indexOf(' Safari/') > -1)
    {
        clientWidth = window.innerWidth;
        clientHeight = window.innerHeight;
    }
    else if (navigator.userAgent.indexOf('Opera/') > -1)
    {
        clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
        clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
    }
    else
    {
        clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
        clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
    }

    back.style.width = Math.max(Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), clientWidth)+'px';
    back.style.height = Math.max(Math.max(document.documentElement.scrollHeight, document.body.scrollHeight), clientHeight)+'px';
    back.style.display = '';

    toggleSelect('hidden');
}
function hide()
{
    document.getElementById("DivBack").style.display = 'none';
    toggleSelect('visible');
}
function toggleSelect(visibility)
{
    var ss = document.getElementsByTagName('select');

    for(var i = 0; i < ss.length; i++)
    {
        ss[i].style.visibility = visibility;
    }
}
</script>

<body>
    <p>
        <input type="button" value="show" οnclick="show()" />
        <select>
            <option>11111</option>
            <option>22222</option>
        </select>
    </p>
    <div id="DivBack" style="z-index: 99; left: 0px; position: absolute; top: 0px; background-color: Gray;
        filter: alpha(opacity=70); opacity: 0.7; display: none; text-align: center;">
        <input type="button" value="hide" οnclick="hide()" />
    </div>
</body>
</html>