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

前端技术 2023/09/03 JavaScript

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。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-only\">40% 完成</span>
</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=\"text-align:center;color:red\">文件正在上传请勿刷新页面！</span><br /> 
<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() { 
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>

其实，bootstrap的进度条是通过css样式进行展现的，所以只要不断滴修改，style width的值，就可以显示出来。当然我这个循环，重现刷新页面才能重新隐藏掉进度条。若是，用post提交，然后根据返回值进行判断，然后用$(\'#myModal1\').modal(\'hide\');将其隐藏，stop的值相应滴就改为1，不然会在一直跑滴。

本文地址：https://www.stayed.cn/item/6449

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案