div锁定页面

最新推荐文章于 2022-09-27 14:05:28 发布

张小凡vip

最新推荐文章于 2022-09-27 14:05:28 发布

阅读量3.2k

点赞数 1

分类专栏： web web模块积累文章标签： html div 锁定

本文链接：https://blog.csdn.net/zzq900503/article/details/41542913

版权

web 同时被 2 个专栏收录

142 篇文章 2 订阅

订阅专栏

web模块积累

47 篇文章 1 订阅

订阅专栏

效果如图:

我们可以在这个基础上做相应的修改，比如白框上做登录之类的

代码如下，直接新建为html可用:

<html>
    <head>
        <title></title>
        <meta http-equiv="content-Type" content="text/html;charset=gb2312">
        <!-- 把下面代码加到<head>与</head>之间-->
        <style type="text/css">
            .black_overlay {
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: black;
                z-index: 1001;
                -moz-opacity: 0.8;
                opacity: .80;
                filter: alpha(opacity = 80);
            }
            
            .white_content {
                display: none;
                position: absolute;
                top: 25%;
                left: 25%;
                width: 50%;
                height: 50%;
                padding: 16px;
				/**
                border: 16px solid orange;
                **/
                background-color: white;
                z-index: 1002;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <!--把下面代码加到<body> 与</body>之间-->
		<input type="radio" οnclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">
        <div id="light" class="white_content">
        <input type="button" value="关闭" οnclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></a>
        </div>
        <div id="fade" class="black_overlay">
        </div>
    </body>
</html>