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

 更新时间:2016年06月27日 16:14:22   作者:菜鸟芈弄  
这篇文章主要介绍了BootStrap初学者对弹出框和进度条的使用感觉的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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,不然会在一直跑滴。

相关文章

  • javascript canvas检测小球碰撞

    javascript canvas检测小球碰撞

    这篇文章主要为大家详细介绍了javascript canvas检测小球碰撞,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • JavaScript作用域链使用介绍

    JavaScript作用域链使用介绍

    作用域就是变量和函数的可访问范围,控制着变量和函数的可见性与生命周期,在JavaScript中变量的作用域有全局作用域和局部作用域
    2013-08-08
  • js定时器(执行一次、重复执行)

    js定时器(执行一次、重复执行)

    这篇文章主要分享一段js代码,有关js定时器的小例子,分为执行一次的定时器与重复执行的定时器,需要的朋友可以参考下
    2014-03-03
  • JavaScript实现联动菜单特效

    JavaScript实现联动菜单特效

    这篇文章主要为大家详细介绍了JavaScript实现联动菜单特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • javascript 翻页测试页(动态创建标签并自动翻页)

    javascript 翻页测试页(动态创建标签并自动翻页)

    javascript 翻页测试页(动态创建标签并自动翻页),需要的朋友可以参考下。
    2009-12-12
  • uniapp中uni.request(OBJECT)接口请求封装实例代码

    uniapp中uni.request(OBJECT)接口请求封装实例代码

    在开发的时候经常会用到前端请求后端接口,每次的请求都会出现地址不一样,参数不一样,方式不一样等等情况,下面这篇文章主要给大家介绍了关于uniapp中uni.request(OBJECT)接口请求封装的相关资料,需要的朋友可以参考下
    2022-12-12
  • 微信小程序实现简单搜索框

    微信小程序实现简单搜索框

    这篇文章主要为大家详细介绍了微信小程序实现简单搜索框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • JS表的模拟方法

    JS表的模拟方法

    这篇文章主要介绍了JS表的模拟方法,涉及javascript模拟表的生成、添加与删除节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 百度地图去掉marker覆盖物或者去掉maker的label文字方法

    百度地图去掉marker覆盖物或者去掉maker的label文字方法

    下面小编就为大家分享一篇百度地图去掉marker覆盖物或者去掉maker的label文字方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容

    div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容

    div+css+js模拟tab,这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS
    2009-12-12

最新评论