Jquery实现DIV锁屏

最新推荐文章于 2015-04-23 20:14:13 发布

原创最新推荐文章于 2015-04-23 20:14:13 发布 · 8.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #border #button #class #浏览器

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

<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">
			<!--IE6下，DIV默认不能遮盖select标签，可在此处放置一个iframe，以达到遮盖效果，其他浏览器可以不要-->
			<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>