Jquery实现DIV锁屏

素颜马尾好姑娘i 2022-06-15 10:52 286阅读 0赞

<html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
    		<script type="text/javascript" src="./jquery-1.4.4.js"></script>
    		<style type="text/css">
    			.divv
    			{
    			    position:absolute;
    			    top:30%;
    			    left:30%;
    			    width:80px;
    			    height:60px;
    			    border:1px solid #666;
    			    background-color:#9CF;
    			    text-align:center;
    			    display:none;
    			    z-index:300;
    			}
    			.popup
    			{
    				border:1px solid red;
    				position:absolute;
    				top:0px;
    				left:0px;
    				width:100%;
    				height:100%;
    				background-color:#000;
    				filter:alpha(opacity=45);
    				opacity:0.45;
    				display:none;
    				z-index:200;
    			}
    			.fff
    			{
    				border:1px solid blue;
    				position:relative;
    				background-color:#000;
    			}
    		</style>
    		<script type="text/javascript">
    			$(document).ready(
    				function(){
    				
    					//页面初始化
    					goCenter();
    				
    					//滚动条滚动
    					$(window).scroll(
    						function(){
    							goCenter();
    						}
    					);
    					
    					//拖动浏览器窗口
    					$(window).resize(
    						function(){
    							goCenter();
    						}
    					);
    					
    					//锁屏
    					$("#lockButton").click(
    						function(){
    							$("#popupDiv").show();
    							$("#alertDiv").show();
    						}
    					);
    					
    					//解屏
    					$("#unlockButton").click(
    						function(){
    							$("#popupDiv").hide();
    							$("#alertDiv").hide();
    						}
    					);
    				}
    			);
    			
    			function goCenter()
    			{
    				var h = $(window).height();
    				var w = $(window).width();
    				var st = $(window).scrollTop();
    				var sl = $(window).scrollLeft();
    
    				$("#popupDiv").css("width", w+sl);
    				$("#popupDiv").css("height", h+st);
    				$(".divv").css("top", ((h-60)/2)+st);
    				$(".divv").css("left", ((w-80)/2)+sl);
    			}
    		</script>
    	</head>
    	
    	<body bgcolor="#FFFFFF">
    	
    		<select name="sdfas">
    			<option value="a">aaa</option>
    			<option value="b">bbb</option>
    		</select>
    		
    		<input type="button" value="锁屏" id="lockButton"/>
    	
    		<div class="popup" id="popupDiv">
    			
    			<iframe frameborder="1" scrolling="no" height="100%" width="100%" class="fff"></iframe>
    		</div>
    		
    		<div class="divv" id="alertDiv">
    			<input type="button" value="关闭" id="unlockButton"/>
    		</div>
    		
    	</body>
    </html>