网页面中使用遮罩层，可防止重复操作，提示装载；也可以模拟弹出模态窗口。

实现思路：一个p作为遮罩层，一个p显示装货动态GIF格式格式图片。在下面的示例代码中，同时展示了如何在内联框架子页面中调用显示和隐藏遮罩层。

示例代码：

index.html

XML/HTMLCode复制内容到剪贴板

！DOCTYPEhtml

htmllang='zh-CN '

头

metacharset='utf-8 '

meta http-equiv=' X-UA-Commpatible ' content=' IE=edge '

标题超文本标记语言遮罩层/title

linkrel='样式表href='css/index.css '

/head

身体

pclass='header'id='header '

pclass='title-outer '

spanclass='title '

超文本标记语言遮罩层使用

/span

/p

/p

pclass='body'id='body '

iframeid=' iframe right ' name=' iframe right ' width=' ' height=' '

滚动='no'frameborder='0 '

style=' border :0 pxmargin :0 pxpadding :0 px宽度：;高度：;' overflow:hidden '

onload=' right frame load(this)' src=' body。html '/iframe

/p

！-遮罩层p -

pid='叠加class=' '叠加/p

！-装载提示p -

PID=' LoAdingTip ' class=' LoAding-tip '

imgsrc='images/loading.gif'/

/p

！-模拟模态窗口p -

p class=' modal ' id=' modal LP '/p

脚本类型=' text/JavaScript ' src=' js/jquery-1。10 .2 .js '/脚本

脚本类型=' text/JavaScript ' src=' js/index。js '/脚本

/body

/html

index.css

CSSCode复制内容到剪贴板

*{

边距n:0

padding:0

}

html，body{

宽度：;

高度：;

font-size :14 px

}

p.header{

宽度：;

高度：100px

border-bottom :1 pxdashedblue；

}

p .标题-外部{

位置：相对；

前：50%；

高度：30像素

}

span.title{

向左文本对齐：

位置：相对；

左侧：3%;

前：-50%；

font-size :22 px

}

p.body{

宽度：;

}。覆盖{

位置：值；

top:0px

左侧：0像素

z索引：10001;

display:none

filter:alpha(不透明度=60);

背景色： # 777;

opacity:0.5

-moz-opa city 33600.5；

}。装载-提示{

z索引：10002;

位置：固定；

display:none

}。正在加载-tipimg{

宽度宽度：100px

高度：100px

}。modal{

位置：值；

宽度宽度：600像素

高度：360像素

border:1pxsolidrgba(0，0，0，0.2)；

box-shadow:0px3px9pxrgba(0，0，0，0.5)；

display:none

z索引：10003;

边界半径：6 px

}

index.js

JavaScriptCode代码代码复制内容到剪贴板

functionrightframeload(iframe){

varpHeight=getWindowInnerHeight()-$(' # header ').height()-5；

$('p.body ').高度(PhEight)；

控制台。log(PhEight)；

}

//浏览器兼容取得浏览器可视区高度

functiongetWindowInnerHeight(){

varwinHeight=window。内部高度

| |(文档。文档元素文档。文档元素。客户高度)

| |(文档。正文文档。尸体。客户端高度)；

returnwinHeight

}

//浏览器兼容取得浏览器可视区宽度

functiongetWindowInnerWidth(){

varwinWidth=window.innerWidth

| |(文档。文档元素文档。文档元素。客户端宽度)

| |(文档。正文文档。尸体。客户端宽度)；

returnwinWidth

}

/**

*显示遮罩层

*/

functionshowOverlay(){

//遮罩层宽高分别为页面内容的宽高

$('.覆盖")。css({'height':$(文档)。高度()，‘宽度’: $(文档)。width()})；

$('.覆盖")。show()；

}

/**

*显示装货提示

*/

functionshowLoading(){

//先显示遮罩层

show overlay()；

//加载提示窗口居中

$('#loadingTip ').css('top '，

(GetWindowInnerHeight()-$(' # LoadingTip ').height())/2 ' px ')；

$('#loadingTip ').css(')左，

(GetWindowInnerWidth()-$(' # LoadingTip ').width())/2 ' px ')；

$('#loadingTip ').show()；

$(文档)。滚动（函数(){

returnfalse

});

}

/**

*隐藏装货提示

*/

functionhideLoading(){

$('.覆盖")。hide()；

$('#loadingTip ').hide()；

$(文档)。滚动（函数(){

返回真

});

}

/**

*模拟弹出模态窗口p

*@paraminnerHtml模态窗口超文本标记语言内容

*/

functionshowModal(innerHtml){

//取得显示模拟模态窗口用p

var dialog=$(' # modalp ')；

//设置内容

对话。html(InnerHTML)；

//模态窗口p窗口居中

dialog.css({

top ' :(GetWindowInnerHeight()-对话框。height())/2 ' px '，

left ' :(GetWindowInnerWidth()-对话框。width())/2 ' px '

});

//窗口p圆角

dialog.find(' .模态容器').css(')边框半径，' 6px ')；

//模态窗口关闭按钮事件

dialog.find(' .BTN-克洛斯' .click(function(){

closeModal()；

});

//显示遮罩层

show overlay()；

//显示遮罩层

对话。show()；

}

/**

*模拟关闭模态窗口p

*/

functionclosemodel(){

$('.覆盖")。hide()；

$('#modalp ').hide()；

$('#modalp ').html(" ")；

}

body.html

XML/HTMLCode复制内容到剪贴板

！DOCTYPEhtml

htmllang='zh-CN '

头

metacharset='utf-8 '

meta http-equiv=' X-UA-Commpatible ' content=' IE=edge '

标题体页面/title

styletype='text/css '

*{

边距n:0

padding:0

}

html，body{

宽度：;

高度：;

}。外部{

宽度宽度：200像素

高度：120像素

位置：相对；

前：50%；

左侧：50%;

}。内部{

宽度宽度：200像素

高度：120像素

位置：相对；

前：-50%；

左侧：-50%;

}。按钮{

宽度宽度：200像素

高度：40像素

位置：相对；

}。按钮# btnShowLoading {

top:0

}。按钮#btnShowModal{

前：30%；

}

/style

scripttype='text/javascript '

functionshowOverlay(){

//调用父窗口显示遮罩层和装货提示

窗户。顶部。窗户。显示加载()；

//使用定时器模拟关闭装货提示

setTimeout(函数(){

窗户。顶部。窗户。hide LoAding()；

},3000);

}

functionshowmodel(){

//调用父窗口方法模拟弹出模态窗口

窗户。顶部。ShowModal($(' # ModalContent ').html())；

}

/script

/head

身体

pclass='outer '

pclass='inner '

button id=' BtNshowLoading ' class=' button ' onclick=' ShowOverlay()；'点击弹出遮罩层/按钮

button id=' btnshowmodel ' class=' button ' onclick=' show modal()；'点击弹出模态窗口/按钮

/p

/p

！-模态窗口内容p，将本页面p内容设置到父窗口p上并模态显示-

PID=' ModalContent ' style=' display : none；'

p class=' modal-container ' style=' width :；高度：;背景色：白色；'

p style=' width :；高度：49像素位置：相对；左侧：50%;前：50%；"

span style=' font-size :36 px宽度：;文本对齐：中心；显示：内嵌块；位置：继承左侧：-50%;前：-50%；"模态窗口1/span

/p

button class=' BTN-close ' style=' width :100 px；高度：30像素位置：值；' right:30pxbottom:20px '关闭/按钮

/p

/p

脚本类型=' text/JavaScript ' src=' js/jquery-1。10 .2 .js '/脚本

/body

/html

本文转载自中文网