HTML实现遮罩层的方法

1、html实现遮罩层的方法web页面中用法遮罩层，可防止重复操作，提醒loading；也可以模拟弹出模态窗口。实现思路：一个p作为遮罩层，一个p显示loading动态gif。在下面的示例代码中，同时展示了如何在iframe子页面中调用显示和躲藏遮罩层。示例代码：index.htmlxml/htmlcode复制内容到剪贴板html遮罩层html遮罩层用法index.csscsscode复制内容到剪贴板*margin:0;padding:0;html,bodywidth:100%;height:100%;font-size:14px;p.headerwidth:100%;height:100px;b

2、order-bottom:1pxdashedblue;p.title-outerposition:relative;top:50%;height:30px;span.titletext-align:left;position:relative;left:3%;top:-50%;font-size:22px;p.bodywidth:100%;.overlayposition:absolute;top:0px;left:0px;z-index:10001;display:none;filter:alpha(opacity=60);background-color:777;opacity:0.5;-

3、moz-opacity:0.5;.loading-tipz-index:10002;position:fixed;display:none;.loading-tipimgwidth:100px;height:100px;.modalposition:absolute;width:600px;height:360px;border:1pxsolidrgba(0,0,0,0.2);box-shadow:0px3px9pxrgba(0,0,0,0.5);display:none;z-index:10003;border-radius:6px;index.jsjavascriptcode复制内容到剪贴

4、板functionrightiframeload(iframe)varpheight=getwindowinnerheight()-$(&39;header&39;).height()-5;$(&39;p.body&39;).height(pheight);console.log(pheight);/扫瞄器兼容取得扫瞄器可视区高度functiongetwindowinnerheight()varwinheight=window.innerheight|(document.documentelement&&document.docu

5、mentelement.clientheight)|(document.body&&document.body.clientheight);returnwinheight;/扫瞄器兼容取得扫瞄器可视区宽度functiongetwindowinnerwidth()varwinwidth=window.innerwidth|(document.documentelement&&document.documentelement.clientwidth)|(document.body&&document.b

6、ody.clientwidth);returnwinwidth;/*显示遮罩层*/functionshowoverlay()/遮罩层宽高分离为页面内容的宽高$(&39;.overlay&39;).css(&39;height&39;:$(document).height(),&39;width&39;:$(document).width();$(&39;.overlay&39;).show();/*显示loading提醒*/functionshowloading()/先显示遮罩层showoverlay();/loading提醒窗口

7、居中$("loadingtip").css(&39;top&39;,(getwindowinnerheight()-$("loadingtip").height()/2+&39;px&39;);$("loadingtip").css(&39;left&39;,(getwindowinnerwidth()-$("loadingtip").width()/2+&39;px&39;);$(&am

8、p;quot;loadingtip").show();$(document).scroll(function()returnfalse;);/*躲藏loading提醒*/functionhideloading()$(&39;.overlay&39;).hide();$("loadingtip").hide();$(document).scroll(function()returntrue;);/*模拟弹出模态窗口p*paraminnerhtml模态窗口html内容*/functionshowmodal(innerhtml)/

9、取得显示模拟模态窗口用pvardialog=$(&39;modalp&39;);/设置内容dialog.html(innerhtml);/模态窗口p窗口居中dialog.css(&39;top&39;:(getwindowinnerheight()-dialog.height()/2+&39;px&39;,&39;left&39;:(getwindowinnerwidth()-dialog.width()/2+&39;px&39;);/窗口p圆角dialog.find(&39;.modal-containe

10、r&39;).css(&39;border-radius&39;,&39;6px&39;);/模态窗口关闭按钮大事dialog.find(&39;.btn-close&39;).click(function()closemodal(););/显示遮罩层showoverlay();/显示遮罩层dialog.show();/*模拟关闭模态窗口p*/functionclosemodal()$(&39;.overlay&39;).hide();$(&39;modalp&39;).hide();$(&39;m

11、odalp&39;).html(&39;&39;);body.htmlxml/htmlcode复制内容到剪贴板body页面*margin:0;padding:0;html,bodywidth:100%;height:100%;.outerwidth:200px;height:120px;position:relative;top:50%;left:50%;.innerwidth:200px;height:120px;position:relative;top:-50%;left:-50%;.buttonwidth:200px;height:40px;position:relative;.buttonbtnshowloadingtop:0;.buttonbtnshowmodaltop:30%;functionshowoverlay()/调用父窗口显示遮罩层和loading提醒window.top.window.showloading();/用法定时器模拟关闭loading提醒settimeout(functi