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 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
JavaScript 模拟用户单击事件
Dec 31 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 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
php中防止伪造跨站请求的小招式
2011/09/02 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
python利用faker库批量生成测试数据
2020/10/15 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
机电工程专业应届生求职信
2013/10/03 职场文书
会计自荐书
2013/12/02 职场文书
《三峡》教学反思
2014/03/01 职场文书
大学课外活动总结
2014/07/09 职场文书
社区娱乐活动方案
2014/08/21 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
国博复兴之路观后感
2015/06/02 职场文书