BootStrap初学者对弹出框和进度条的使用感觉.docx

BootStrap初学者对弹出框和进度条的使用感觉 Bootstrap,来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷。 bootstrap框架提供的进度条,如菜鸟教程里面的这些代码 aria-valuemin="0"aria-valuemax="100"style="width:40%;"> 40%完成让我这种真正的菜鸟一开始不知道该如何....让其变为真正的进度条。不过进过百度几下别人的之后,只要这个是要添加jquery代码配合之下才能实现滴。我度呀度,终于实现如下,略带高兴。 aria-labelledby="myModalLabel"aria-hidden="true"data-backdrop="static"style="width:300px"> 文件正在上传请勿刷新页面! 上面这段是,用弹出框里面包含进度条。不然怎么实现一个开始让其隐藏的呢?在用bootstrap做进度条,或者固定的弹出框时,加上data-backdrop="static"这句比较好,因为没有这个修饰,你只要点击下鼠标,弹出框就消失不见了。 varp=101; varstop=1; functionrun(){ p+=4; $("div[class=bar]").css("width",p+"%"); vartimer=setTimeout("run()",500); if(p>100&&stop p=0; } } $('#BtnSubmit').click(function(){ $('#myModal1').modal('show'); p=0; stop=0; run(); $('#UpLoad').submit(); }); 其实,bootstrap的进度条是通过css样式进行展现的,所以只要不断滴修改,stylewidth的值,就可以显示出来。当然我这个循环,重现刷新页面才能重新隐藏掉进度条。若是,用post提交,然后根据返回值进行判断,然后用$('#myModal1').modal('hide');将其隐藏,stop的值相应滴就改为1,不然会在一直跑滴。