Bootstrap Beginners feel _javascript tips for using pop-up frames and progress bars

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

The bootstrap framework provides a progress bar, such as the code in the rookie tutorial

<div class= "Progress" > <div class= "Progress-bar" role= "ProgressBar
" aria-valuenow= 
" aria-valuemin= "0" aria-valuemax= "style=" width:40%; >
<span class= "sr-only" >40% complete </span>
</div>
</div>

Let me the real rookie at first don't know how to .... Let it become a real progress bar. But after a few people into Baidu, as long as this is to add jquery code with the implementation of drops. I degree degrees, 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 "> files are being uploaded please do not refresh the page! </span><br/> 
<div class= "Progress progress-striped Active" > 
<div class= "Bar" > 
</div> 
</div> 
</div> 
</div> 

The above section is, with a pop-up box containing the progress bar. How else do you realize a beginning to hide it? When using bootstrap to make progress bar, or fixed pop-up box, plus data-backdrop= "Static" This sentence is better, because without this modification, you just click the mouse, pop-up box disappears.

<scripts> 
var p =; 
var stop = 1; 
function run () { 
p = 4; 
$ ("Div[class=bar]"). CSS ("width", p + "%"); 
var timer = settimeout ("Run ()"); 
if (P >100&&stop<1) { 
p = 0; 
} 
} 
$ (' #BtnSubmit '). Click (function () { 
$ (' #myModal1 '). Modal (' show '); 
p = 0; 
stop = 0; 
Run (); 
$ (' #UpLoad '). Submit (); 
 

In fact, Bootstrap's progress bar is through the CSS style to show, so as long as the constant drip changes, style width of the value, you can display. Of course my loop, recreate the page to hide the progress bar again. If so, submit it by post, then judge it based on the return value, and then use $ (' #myModal1 '). Modal (' hide '); hide it, stop the value of the corresponding drop to 1, otherwise it will run all the time.