一、在页面中加入如下代码

<div class="modal fade" tabindex="-1" role="dialog" id="waitingModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">正在操作中...</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="" aria-valuemin="" aria-valuemax="" style="width: 100%">
<span class="sr-only">%</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" disabled class="btn btn-default" data-dismiss="modal">正在操作,请勿关闭或刷新页面!</button>
</div>
</div>
</div>
</div>

    <script>
      function showWaiting() {
        $('#waitingModal').modal({
          keyboard: false,
          backdrop: 'static',
          show: true
        });
      }
      function hideWaiting() {
        $('#waitingModal').modal('hide');
      }
    </script>

二、使用的地方

  显示:showWaiting()

  隐藏:hideWaiting()

三、效果

  

Bootstrap相关网站中简单的等待提醒的更多相关文章

  1. bootstrap设计网站中添加代码高亮插件

    这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/ ...

  2. Sticker.js – 帮助你在网站中加入贴纸效果

    Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果.没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作.下面有简单的使用示 ...

  3. 新西兰程序员 ASP.NET网站中设置404自定义错误页面

    新西兰程序员 ASP.NET网站中设置404自定义错误页面 在用ASP.NET WebForm开发一个网站时,需要自定义404错误页面. 做法是这样的 在网站根目录下建立了一个404.html的错误页 ...

  4. Bootstrap相关资料

    WEB项目中,使用Bootstrap较多.但是一些插件却比较确实,所以整理了一份Bootstrap相关插件的地址.基本满足日常WEB开发中插件需求.并且还挺好用的 bootstrap说明文档,有问题可 ...

  5. 最值得收藏的Bootstrap资源网站

    如果你正在寻找Bootstrap图标,那今天的推荐对你而言绝对非常重要!在这篇内容中,我们把这套框架上的免费字体图 标做了个整合(当然,以后还会不断的更新).正如你所知,图标字体在一个web网页设计拥 ...

  6. TogetherJS – 酷!在网站中添加在线实时协作功能

    TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...

  7. 网站中的专题页或者tag聚合页的权重不错

    一.据最近的一些观察,觉得网站中的专题页或者tag聚合页的权重不错,因此多给网站制作一些专题页面,不仅有利于聚合站内的文章,更是绝对的原创内容,应该会受到百度的青睐.简评:关于权重的讨论,这篇无疑是很 ...

  8. RulersGuides.js – 网站中实现 Photoshop 标尺效果

    RulersGuides.js 是一个 JavaScript 库,在网页上添加类似 Photoshop 中的标尺和辅助网格线.要创建创建网格线线,请单击垂直或水平的标尺,然后推动就可以.还可以使用相应 ...

  9. 释放SQL Server占用的内存 .Net 读取xml UrlReWriter 在web.config中简单的配置

    释放SQL Server占用的内存   由于Sql Server对于系统内存的管理策略是有多少占多少,除非系统内存不够用了(大约到剩余内存为4M左右),Sql Server才会释放一点点内存.所以很多 ...

随机推荐

  1. springboot—spring aop 实现系统操作日志记录存储到数据库

    原文:https://www.jianshu.com/p/d0bbdf1974bd 采用方案: 使用spring 的 aop 技术切到自定义注解上,针对不同注解标志进行参数解析,记录日志 缺点是要针对 ...

  2. 分布式系统:CAP

    一致不太理解CAP,最近好像有点感觉了,这里写下来,先介绍下CAP的定义: C:一致性.写完数据后,立马能看到最新数据. A:可用性.所有请求必须有响应. P:分区容错性.网络或服务器故障不会导致系统 ...

  3. 转: MySQL5.7 ERROR 1142 (42000)问题

    1,mysql全库导入报错 [root@dev_121_21 ~]# mysql--socket=/usr/local/mysql/mysql.sock --default-character-set ...

  4. spring 深入reading

    http://wenku.baidu.com/view/8db141624a7302768e9939b3.html http://docs.spring.io/spring/docs/4.2.1.BU ...

  5. ios之网络异常与正常视图的切换

    1. xib中创建两个View 2. View的视图大概如下第一个:View View 第二个:View 3. 代码切换: [self.view addSubview:_redView];  // 会 ...

  6. 《图解CSS3:核心技术与案例实战》

    <图解CSS3:核心技术与案例实战> 基本信息 作者: 大漠 丛书名: Web开发技术丛书 出版社:机械工业出版社 ISBN:9787111469209 上架时间:2014-7-2 出版日 ...

  7. vue elementui switch开关控件的使用

    <el-switch @change="test" on-value="1" off-value="0" v-model=" ...

  8. JAVA 项目中使用 H2 数据库

    为什么要使用H2数据库 H2数据库是可以嵌入到JAVA项目中的,因为只需要导入一个jar包即可,所以非常的方便. 项目中导入H2 将H2的jar包放到classpath里即可,我是用的maven,ma ...

  9. java将XML文档转换成json格式数据

    功能 将xml文档转换成json格式数据 说明 依赖包:1. jdom-2.0.2.jar : xml解析工具包;2. fastjson-1.1.36.jar : 阿里巴巴研发的高性能json工具包 ...

  10. cannot be resolved. It is indirectly referenced from required .class files

    缺少引用. 把缺少的引用在导入一下...如果是mavan 在当前moudle里也要把 dependency加进来