效果如图:

div锁定页面_ci



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


代码如下,直接新建为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>