点击按钮弹出蒙板操作页面

最新推荐文章于 2021-02-23 17:05:27 发布

感谢一路走过的人

最新推荐文章于 2021-02-23 17:05:27 发布

阅读量723

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript C# asp.net div+css

本文链接：https://blog.youkuaiyun.com/leejin_521/article/details/8488231

C# asp.net 同时被 3 个专栏收录

113 篇文章

订阅专栏

JavaScript

70 篇文章

订阅专栏

div+css

14 篇文章

订阅专栏

本文提供了一个HTML、CSS和JavaScript实现的弹出窗口展示示例，包括窗口大小调整、透明度设置及显示隐藏功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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></title>
    <style type="text/css">
        #divMenBan
        {
            display: none;
            position: absolute;
            z-index: 1000;
            height: 100%;
            width: 100%;
            left: 0px;
            top: 0px;
            background: #000000;
            filter: Alpha(opacity=30);
        }
        #divDisplay
        {
            display: none;
            position: absolute;
            height: 100%;
            width: 100%;
            padding-top: 10%;
            z-index: 1001;
            left: 0px;
            top: 0px;
        }
    </style>
    <script type="text/javascript">
        function ShowDisplay() {

            var winWH = getPageSize();
            //alert(winWH[0] + " " + winWH[1] + " " + winWH[2] + " " + winWH[3] + " ");
            document.getElementById('divMenBan').style.width = winWH.x.toString() + "px";
            document.getElementById('divMenBan').style.height = winWH.y.toString() + "px";
            document.getElementById('divDisplay').style.width = winWH.x.toString() + "px";
            document.getElementById('divDisplay').style.height = winWH.y.toString() + "px";
            if (document.getElementById('divDisplay').style.display == 'none' || document.getElementById('divDisplay').style.display == '') {
                document.getElementById('divMenBan').style.display = 'block';
                document.getElementById('divDisplay').style.display = 'block';
            }

}
function getPageSize() {

var xScroll, yScroll;

            if (window.innerHeight && window.scrollMaxY) {
                xScroll = document.body.scrollWidth;
                yScroll = window.innerHeight + window.scrollMaxY;
            } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
                xScroll = document.body.scrollWidth;
                yScroll = document.body.scrollHeight;
            } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
                xScroll = document.body.offsetWidth;
                yScroll = document.body.offsetHeight;
            }

            var windowWidth, windowHeight;
            if (self.innerHeight) { // all except Explorer
                windowWidth = self.innerWidth;
                windowHeight = self.innerHeight;
            } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
                windowWidth = document.documentElement.clientWidth;
                windowHeight = document.documentElement.clientHeight;
            } else if (document.body) { // other Explorers
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }

            // for small pages with total height less then height of the viewport
            if (yScroll < windowHeight) {
                pageHeight = windowHeight;
            } else {
                pageHeight = yScroll;
            }

            // for small pages with total width less then width of the viewport
            if (xScroll < windowWidth) {
                pageWidth = windowWidth;
            } else {
                pageWidth = xScroll;
            }

            //arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
            return { x: pageWidth, y: pageHeight };
        }
        var resizeTime = null;
        window.onresize = function () {
            if (resizeTime == null) {
                resizeTime=setTimeout(doResize, 100);
            }
        }
        function doResize() {
            var winWH = getPageSize();
            document.getElementById('divMenBan').style.width = winWH.x.toString() + "px";
            document.getElementById('divMenBan').style.height = winWH.y.toString() + "px";
            document.getElementById('divDisplay').style.width = winWH.x.toString() + "px";
            document.getElementById('divDisplay').style.height = winWH.y.toString() + "px";
        }
    </script>
</head>
<body>
    <div>
        <input type="button" value="弹出" onclick='ShowDisplay();' />
    </div>
    <div id='divMenBan'>
    </div>
    <div id='divDisplay'>
        ksksjksjfksdjfdkasfjasdkfasd
        <br />
        dsafadskfjsalkfj
        <br />
        dsafadskfjsalkfj
        <br />
        dsafadskfjsalkfj
        <br />
        dsafadskfjsalkfj
        <br />
        dsafadskfjsalkfj
        <br />
        dsafadskfjsalkfj
    </div>
</body>
</html>