Beginner's use of bootstrap feel, popup box and progress bar

Source: Internet
Author: User

I just contact Bootstrap soon, feel that it is not very cool to use. Finally the reason is that I touch the front-end development less. Used to be accustomed to the Easyui, suddenly used this is not very suitable. Especially in the local refresh that aspect, after submission, do not know how to modify the large tracts of div .... These are not to be said. This is, humble people blog post, suddenly found that blogging is also a technology ... It's so hard to gather content.

The bootstrap framework provides a progress bar, such as this 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 this real rookie at the beginning don't know how to .... Turn it into a real progress bar. But after a few people in Baidu after the others, as long as this is to add jquery code together to achieve drip. My degree, finally realize the following, 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 "> file is uploading do not refresh the page. </span><br/>
          
           <div class= "Progress progress-striped Active" >
               <div class= "Bar" >
               </div>
           </div>
       </div>
   </div>
</div>
The above paragraph is to include a progress bar in the popup box. How else to achieve a start to hide it. When using bootstrap to do progress bar, or fixed pop-up box, plus data-backdrop= "Static" This sentence is better, because without this modification, you just click the mouse, 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 ()", +);
           if (P >100&&stop<1) {         
               p = 0;
           }
       }
       $ (' #BtnSubmit '). Click (function () {
           $ (' #myModal1 '). Modal (' show ');
           p = 0;
           stop = 0;
           Run ();
           $ (' #UpLoad '). Submit ();
           
       });
</scripts>
In fact, the bootstrap progress bar is shown through CSS style, so as long as the change, style width value, it can be displayed. Of course I have this loop to reproduce the Refresh page to hide the progress bar again. If, submit with post, then judge by the return value, then use $ (' #myModal1 '). Modal (' hide '), hide it, stop the value of the corresponding drop will be changed to 1, otherwise it will be running drops.








Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.