将网页背景变灰并居中弹出弹层

最新推荐文章于 2022-12-02 11:41:54 发布

cikeyouling

最新推荐文章于 2022-12-02 11:41:54 发布

阅读量138

点赞数

分类专栏： jQuery 文章标签：网页背景变灰弹出遮罩层

本文链接：https://blog.csdn.net/cikeyouling/article/details/84428679

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

做的小demo记录一下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 <style>
 .showdiv{
	position:absolute;
	background: #897;
	width: 250px;
	height: 150px;
	z-index:999;
	}
 </style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//监听浏览器窗口的变化
	$(window).resize(function(){
	 //alert("Stop it!");
	 var term=$("#coverdiv").attr("style");
	 if(term!=null && term!=undefined){
	 var iWidth = $(window).width()//浏览器当前窗口可视区域宽度
	 var iHeight = $(window).height()//浏览器当前窗口可视区域高度 
	 var divStyle="position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max($(document).height(),				iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:998;"
	 $("#coverdiv").attr("style",divStyle);
		showPosition('showdiv');
	 }
	});
});

//增加遮罩层
function addCoverDiv(showdivId){
	var cdiv="<div id='coverdiv'></div>";
	$('body').append(cdiv);
	var iWidth = $(window).width()//浏览器当前窗口可视区域宽度
	var iHeight = $(window).height()//浏览器当前窗口可视区域高度 
	var divStyle="position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max($(document).height(), iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:998;"
	$("#coverdiv").attr("style",divStyle);
	//setTimeout(removeDiv,2000);
	showPosition('showdiv')
	$('#'+showdivId+'').show();
	}

//移除遮罩层
function removeDiv(showdivId){
	$("#coverdiv").remove();
	$('#'+showdivId+'').hide();
}

//控制弹出层的位置
function showPosition(showid){
	var showObj=$('#'+showid+'')
	var iWidth = $(window).width()//浏览器当前窗口可视区域宽度
	var iHeight = $(window).height()//浏览器当前窗口可视区域高度 
	var w=showObj.width();
	var h=showObj.height()
	var sleft=(iWidth-w)/2;
	var stop=(iHeight-h)/2;
	var showStyle="top:"+stop+"px;left:"+sleft+"px;";
	showObj.attr("style",showStyle);
}

function test(){
	alert("页面的文档高度 :"+$(document).height());   
	alert($(window).width()); //浏览器当前窗口可视区域宽度 
alert($(window).height()); //浏览器当前窗口可视区域高度 

}
</script>
 <body>
  <input type="button" value="变灰页面背景" οnclick="addCoverDiv('showdiv')">
  <input type="button" value="控制弹层位置" οnclick="showPosition('showdiv')">
  <div id="showdiv" class="showdiv" >
	此处需要显示的divssss
	<div><a href="javascript:removeDiv('showdiv')">close</a></div>
  </div>
  </body>
</html>

cikeyouling

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
将网页背景变灰并居中弹出弹层

做的小demo记录一下：&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt; New Document &lt;/title&gt
复制链接

扫一扫