Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。

bootstrap 框架提供的進度條，如菜鳥教程里面的這些代碼

<div class="progress">

<div class="progress-bar" role="progressbar" aria-valuenow="60"

aria-valuemin="0" aria-valuemax="100" style="width: 40%;">

<span class="sr-only">40% 完成</span>

</div>

</div>

讓我這種真正的菜鳥一開始不知道該如何....讓其變?yōu)檎嬲倪M度條。不過進過百度幾下別人的之后，只要這個是要添加jquery代碼配合之下才能實現(xiàn)滴。我度呀度，終于實現(xiàn)如下，略帶高興。

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog"

aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" style="width:300px">

<div class="modal-dialog">

<div class="modal-content" >

<span style="text-align:center;color:red">文件正在上傳請勿刷新頁面！</span><br />

<div class="progress progress-striped active">

<div class="bar">

</div>

</div>

</div>

</div>

</div>

上面這段是，用彈出框里面包含進度條。不然怎么實現(xiàn)一個開始讓其隱藏的呢？在用bootstrap 做進度條，或者固定的彈出框時，加上data-backdrop="static" 這句比較好，因為沒有這個修飾，你只要點擊下鼠標(biāo)，彈出框就消失不見了。

<scripts>

var p = 101;

var stop = 1;

function run() {

p += 4;

$("div[class=bar]").css("width", p + "%");

var timer = setTimeout("run()", 500);

if (p >100&&stop<1) {

p = 0;

}

}

$('#BtnSubmit').click(function () {

$('#myModal1').modal('show');

p = 0;

stop = 0;

run();

$('#UpLoad').submit();

});

</scripts>

其實，bootstrap的進度條是通過css樣式進行展現(xiàn)的，所以只要不斷滴修改，style width的值，就可以顯示出來。當(dāng)然我這個循環(huán)，重現(xiàn)刷新頁面才能重新隱藏掉進度條。若是，用post提交，然后根據(jù)返回值進行判斷，然后用$('#myModal1').modal('hide');將其隱藏，stop的值相應(yīng)滴就改為1，不然會在一直跑滴。