Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.
The progress bar provided by the bootstrap framework, such as the code in the novices tutorial
<div><div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span>40% Complete</span></div></div>
Let me, a real novices like me, don't know how to... let it become a real progress bar. However, after entering Baidu for a few times, you can only achieve this by adding jquery code to cooperate. My degree is finally realized as follows, a little happy.
<div id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static"> <div> <div> <span style="text-align:center;color:red">The file is being uploaded, please do not refresh the page! </span><br /> <div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
The above paragraph is to use the pop-up box to contain the progress bar. Otherwise, how can I achieve something that starts to hide? When using bootstrap as a progress bar or a fixed pop-up box, adding data-backdrop="static" is better, because without this modification, you just click the mouse and the pop-up box will disappear.
<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 the css style, so as long as you keep modifying the value of style width, you can display it. Of course, in my cycle, the refresh page can only be rediscovered and hidden. If so, submit it with post, then judge based on the return value, and then hide it with $('#myModal1').modal('hide'); and change the corresponding value of stop to 1, otherwise it will keep running.