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


Posted in Javascript onJune 27, 2016

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 相关文章推荐
ajax与302响应代码测试
Oct 23 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
JQuery教学之性能优化
May 14 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
详解vue路由
Aug 05 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 #Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 #Javascript
JavaScript事件详细讲解
Jun 27 #Javascript
JS原型链怎么理解
Jun 27 #Javascript
js选择器全面解析
Jun 27 #Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 #Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 #Javascript
You might like
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
分享几个超级震憾的图片特效
2012/01/08 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
python3中dict(字典)的使用方法示例
2017/03/22 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技