html遮盖层

、在html的body中添加如下代码：

1 2 3 4 5 6 7 8

< div  class = "modal fade"  id = "loadingModal" >      < div  style = "width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px" >          < div  class = "progress progress-striped active"  style = "margin-bottom: 0;" >              < div  class = "progress-bar"  style = "width: 100%;" ></ div >          </ div >          < h5 >正在加载...</ h5 >      </ div > </ div >

2、用jquery进行显示和隐藏

1 2 3 4

//显示 $( "#loadingModal" ).modal( 'show' ); //隐藏 $( "#loadingModal" ).modal( 'hide' );

3、其他设置

1 2 3 4 5 6 7 8 9

//使点击空白处遮罩层不会消失  $( "#loadingModal" ).modal({backdrop: 'static' }); //按Tab键遮罩层不会消失 ，默认值为true  $( "#loadingModal" ).modal({keyboard: false });   //也可以一起运用 //backdrop 为 static 时，点击模态对话框的外部区域不会将其关闭。 //keyboard 为 false 时，按下 Esc 键不会关闭 Modal。 $( '#loadingModal' ).modal({backdrop:  'static' , keyboard:  false });

css:

//第一种,全部遮盖

background:#000;
opacity:.5;
filter: alpha(opacity=50);
position: fixed;
z-index: 1000;
top:0;
bottom:0;
left:0;
right:0;

//第二种,可以局部遮盖,注意如果有浮动,需要清除,避免height失效

position:absolute;

padding:0;

margin:0;

width:100%;

height:100%;

background:rgba(5,90,131,0.5);