(转) bootstrap 加载进度条

(转) 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 });

    推荐阅读