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 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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创建者模式
2014/11/25 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
js类型检查实现代码
2010/10/29 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
vue mounted组件的使用
2018/06/18 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
Python 实现微信自动回复的方法
2020/09/11 Python
Python3读写ini配置文件的示例
2020/11/06 Python
python自动生成sql语句的脚本
2021/02/24 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
简单的JAVA编程面试题
2013/03/19 面试题
领导调研接待方案
2014/02/27 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
党性分析材料格式
2014/12/19 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
技术转让协议书
2016/03/19 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS