BootStrap初學(xué)者對(duì)彈出框和進(jìn)度條的使用感覺

    Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。
    bootstrap 框架提供的進(jìn)度條，如菜鳥教程里面的這些代碼
    <div>
    <div role="progressbar" aria-valuenow="60"
    aria-valuemin="0" aria-valuemax="100">
    <span>40% 完成</span>
    </div>
    </div>
    讓我這種真正的菜鳥一開始不知道該如何....讓其變?yōu)檎嬲倪M(jìn)度條。不過進(jìn)過百度幾下別人的之后，只要這個(gè)是要添加jquery代碼配合之下才能實(shí)現(xiàn)滴。我度呀度，終于實(shí)現(xiàn)如下，略帶高興。
    <div id="myModal1" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div>
    <div >
    <span>文件正在上傳請(qǐng)勿刷新頁面！</span><br />
    <div>
    <div>
    </div>
    </div>
    </div>
    </div>
    </div>
    上面這段是，用彈出框里面包含進(jìn)度條。不然怎么實(shí)現(xiàn)一個(gè)開始讓其隱藏的呢？在用bootstrap 做進(jìn)度條，或者固定的彈出框時(shí)，加上data-backdrop="static" 這句比較好，因?yàn)闆]有這個(gè)修飾，你只要點(diǎn)擊下鼠標(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>
    其實(shí)，bootstrap的進(jìn)度條是通過css樣式進(jìn)行展現(xiàn)的，所以只要不斷滴修改，style width的值，就可以顯示出來。當(dāng)然我這個(gè)循環(huán)，重現(xiàn)刷新頁面才能重新隱藏掉進(jìn)度條。若是，用post提交，然后根據(jù)返回值進(jìn)行判斷，然后用$('#myModal1').modal('hide');將其隱藏，stop的值相應(yīng)滴就改為1，不然會(huì)在一直跑滴。