BootStrap beginner's feeling of using pop up box and progress bar

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS and JAVASCRIPT. It is simple and flexible, which makes Web development faster.

The progress bar provided by bootstrap framework, such as these codes in the rookie tutorial

<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%  Finish </span>
</div>
</div>

Let me, a real rookie, start wondering how to... turn it into a real progress bar. However, after entering Baidu for a few times, as long as this is to add jquery code to cooperate with it, it can be realized. I am a degree, finally realized as follows, slightly happy.

<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"> The file is being uploaded. Please do not refresh the page! </span><br /> 
<div class="progress progress-striped active"> 
<div class="bar"> 
</div> 
</div> 
</div> 
</div> 
</div> 

In the above paragraph, use the pop-up box to contain the progress bar. Otherwise, how to realize one that starts to hide it? When using bootstrap as a progress bar or a fixed pop-up box, it is better to add data-backdrop= "static", because without this modification, you only need to click the mouse and the pop-up box disappears.

<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> 

In fact, the progress bar of bootstrap is displayed through css style, so the value of style width can be displayed as long as it is continuously modified. Of course, in this loop, I can reproduce and refresh the page to hide the progress bar again. If yes, submit it with post, then judge it according to the return value, and then use $('# myModal1'). modal ('hide'); Hide it, and the value of stop will be changed to 1 accordingly, otherwise it will run straight at 1.