《BootStrap初学者对弹出框和进度条的用法感觉_.docx》由会员分享，可在线阅读，更多相关《BootStrap初学者对弹出框和进度条的用法感觉_.docx（4页珍藏版）》请在三一文库上搜索。
1、BootStrap初学者对弹出框和进度条的用法感觉_ Bootstrap，来自 _，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁敏捷，使得 Web 开发更加快捷。 bootstrap 框架供应的进度条，如菜鸟教程里面的这些代码 div class=progress div class=progress-bar role=progressbar aria-valuenow=60 aria-valuemin=0 aria-valuemax=100 style=width: 40%; span class=sr-only40% 完成/spa
2、n /div /div 让我这种真正的菜鸟一开头不知道该如何.让其变为真正的进度条。不过进过百度几下别人的之后，只要这个是要添加jquery代码配合之下才能实现滴。我度呀度，最终实现如下，略带兴奋。 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=
3、text-align:center;color:red文件正在上传请勿刷新页面！/spanbr / div class=progress progress-striped active div class=bar /div /div /div /div /div 上面这段是，用弹出框里面包含进度条。不然怎么实现一个开头让其隐蔽的呢？在用bootstrap 做进度条，或者固定的弹出框时，加上data-backdrop=static 这句比较好，由于没有这个修饰，你只要点击下鼠标，弹出框就消逝不见了。 scripts var p = 101; var stop = 1; function run(
4、) p += 4; $(divclass=bar).css(width, p + %); var timer = setTimeout(run(), 500); if (p 100stop1) p = 0; $(#BtnSubmit).click(function () $(#myModal1).modal(show); p = 0; stop = 0; run(); $(#UpLoad).submit(); ); /scripts 其实，bootstrap的进度条是通过css样式进行呈现的，所以只要不断滴修改，style width的值，就可以显示出来。当然我这个循环，重现刷新页面才能重新隐蔽掉进度条。若是，用post提交，然后依据返回值进行推断，然后用$(#myModal1).modal(hide);将其隐蔽，stop的值相应滴就改为1，不然会在始终跑滴。 .