分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

Bootstrap相关网站中简单的等待提醒

发布时间:2023-09-06 01:29责任编辑:林大明关键词:Bootstrap

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

<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="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> ???????????????????????????<span class="sr-only">100%</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相关网站中简单的等待提醒

原文地址:http://www.cnblogs.com/songxingzhu/p/8000388.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved