基于JQUERY BOOTSTRAP 最简单的loading遮罩层

aiqi1964

于 2019-07-12 16:16:00 发布

阅读量505

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mr-hu2009/p/11176754.html

版权

本文介绍了一种使用HTML和JavaScript实现的加载遮罩层方法，该方法通过在页面上覆盖一个带有进度条和加载提示的模态对话框来显示加载状态。文章提供了具体的HTML结构和JavaScript代码，用于展示如何创建和控制加载遮罩层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%--loading遮罩层--%>
<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false"> 　　<div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px"> 　　　　<div class="progress progress-striped active" style="margin-bottom: 0;"> 　　　　　　<div class="progress-bar" style="width: 100%;"></div> 　　　　</div> 　　　　<h5 id="loadText">loading...</h5> 　　</div> </div> <%--loading方法--%> <script type="text/javascript"> var loadingTime= 5;//默认遮罩时间 showLoading = function (loadText) { if(!loadText){ $("#loadText").html(loadText) } $('#loadingModal').modal({backdrop: 'static', keyboard: false}); } hideLoading = function () { $('#loadingModal').modal('hide'); } </script>