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

<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. C#编程(三十三)----------Array类

    Array类 创建数组 Array intArray1 = Array.CreateInstance(typeof(int), 5); for (int i = 0; i < 5; i++) { ...

  2. Ext.grid.GroupingView 分组显示

    1.Ext.grid.GroupingView 主要配置项:            enableGroupingMenu:是否在表头菜单中进行分组控制,默认为true            group ...

  3. 【POI】maven引用POI的依赖,XSSFWorkbook依旧无法使用的问题。

    maven项目引用POI的jar: <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> <dependenc ...

  4. byte[]数组的正则表达式搜索 z

    在byte[]数组的特定位置进行正则表达式匹配. 为了从硬盘上搜索特定类型的文件,需要根据文件的特征值进行匹配. 对于已掌握文件结构的文件,采用hard-code的方式进行匹配:这样速度快: 对于未掌 ...

  5. How to Limit NodeRunner.exe High Memory, CPU Usage

    roblem: NodeRunner.exe is consuming a lot of memory and CPU resulted in performance issues on ShareP ...

  6. confluence知识管理、团队协作软件

    Confluence搭建 参见 https://confluence.atlassian.com/display/CONF54/Installing+the+Confluence+EAR-WAR+Ed ...

  7. linux rename命令批量修改文件名

    修改文件名可以用mv命令来实现 mv filename1 filename2 1 但如果批量修改还是使用rename命令更为方便 现在我们有a b c d 四个文件 增加后缀 rename 's/$/ ...

  8. Secondary NameNode 的作用

    https://blog.csdn.net/xh16319/article/details/31375197 很多人都认为,Secondary NameNode是NameNode的备份,是为了防止Na ...

  9. probotuf 标量数值类型

    标量数值类型 一个标量消息字段可以含有一个如下的类型--该表格展示了定义于.proto文件中的类型,以及与之对应的.在自动生成的访问类中定义的类型: .proto类型 Java 类型 C++类型 备注 ...

  10. org.codehaus.jackson.map.JsonMappingException: Can not construct instance of java.util.Date from String value '2012-12-12 12:01:01': not a valid representation (error: Can not parse date "2012-12-

    Jackson对于date的反序列化只支持几种,如果不符合默认格式则会报一下错误 org.codehaus.jackson.map.JsonMappingException: Can not cons ...