Good Luck! 希望能够帮助到你迅模!
如果帮助到你,请采纳!桐昌巧谢谢!
有很多方法可以实现,基本原理是一样的。你的实现方法是这样的:遮罩部分2个层和登录的层一开始设置的属性为display:none,这是不可见的,点击那个超链接后,开始运行js代码,登录层的内容被复制到了遮罩部分的第二个层里面成为了新的登录层,并设置这个层为最上面,遮罩部分的第一个层设置在新登录层的下面,并设置成充满整个浏览器,背景黑色,透明度为30%,这样你看上去就是半透明的了,并且很大。原来的超链接层再最下面。因为半透明的层在原来超链接层的上面并且很大,所以用鼠标点击的时候只是点击在了半透明的层上面,并没有点击到超链接层上面。js注释:
////下面 设置了一个空链接
location.href="#"兆旁或
//下面2行是赋值
width = div_width
height = div_height
//下面 得到登录层也就是id为popLayer的层的内容
var windowstr= document.getElementById("popLayer").innerHTML
//下面 把登录层内容放到infoDiv层里,形成新的登陆层
document.getElementById("infoDiv").innerHTML=windowstr
//下面2行设置新登录层的位置
document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px"
document.getElementById("infoDiv").style.top=200+"px"
//下面设置新登录层的zIndex值,这个值越大显示的时候就越在上面
document.getElementById("infoDiv").style.zIndex=10001
//下面2行设置新登录层的宽和高
document.getElementById("infoDiv").style.width=width
document.getElementById("infoDiv").style.height=height
//设置新登录层边框
document.getElementById("infoDiv").style.border="3px solid #0099ff"
//tranDiv层里面包含了2个层 一个是半族伍透明的遮罩层tranDiv,另一个是新的登录层infoDiv。可以把它看做一个容器。下面2行设置它的高和宽为网页内容可视区域的高度和宽度,这样这个层就充满整个浏览器了
document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px"
document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px"
//下面 设置这个容器层为可见
document.getElementById("tranDiv").style.display=""
//tranDiv就是那个半透明的遮罩层,现在也设置为可见
document.getElementById("tranDivBack").style.display=""
//下面 设置zindex值为10000,这个值比新登录层少1,表明在新登录层的下面
//document.getElementById("tranDivBack").style.zIndex=10000
//下面 设置新登录成为可见
//document.getElementById("infoDiv").style.display=""
<!--层遮罩部分-->
下面这个就是容器层,它的左上角位于浏览器的0,0位置就是浏览器的左上角,高度宽度在js里设置
<div style="position:absolutedisplay:noneleft:0pxtop:0px" id="tranDiv">
下面这个是遮罩层 它位于容器层的0,0位置,宽度和高度都是100%,就是他的大小和位置和容器层一样,都是整个网页那么大。下面的filter用的是滤镜,他设置的是半透明,Opacity=30 半透明度30%,#000000是启枝黑色,这样看起来就是黑色半透明的一个大层了
<div style="position:absoluteleft:0pxtop:0pxwidth:100%height:100%background-color:#000000filter:alpha(Opacity=30)" id="tranDivBack"></div>
下面是新的登陆层,位置和高度在这里写了,但是运行js的时候会对其进行重新设置
<div align='center'style='position:absoluteleft:0pxtop:0pxwidth:100%height:100%background-color:#e5edf5background-image:url(images/bestnetqywimg/tccbg.gif)' id='infoDiv'></div>
</div>
<!--层遮罩部分结束-->
工具:电脑;浏览器;ultraedit软件;
*** 作步骤如袜灶下:
1、打开UE编辑器,新建一个空白的html文件和css文件;
2、在html文件中输入以下html代码;
3、在css文件中纳正输入以下css代码;
4、编辑完成之后,选择格式为UTF8-无 BOM模式,保存文件;
5、在浏览器中打开此html文件,可以看到最终想要告茄扮实现的遮住全屏效果。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)