(转) http://51coding.blog.51cto.com/6079322/1754415
【(转) bootstrap 加载进度条】 1、在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
});
|
推荐阅读