利用Bootstrap 模态框（Modal）实现loading框效果

最新推荐文章于 2025-03-24 22:17:09 发布

小山沟里的程序猿

最新推荐文章于 2025-03-24 22:17:09 发布

阅读量1.2w

点赞数 2

分类专栏： JavaScript 文章标签： jquery loading

本文链接：https://blog.csdn.net/William0318/article/details/102909640

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用Bootstrap模态框（Modal）实现加载中（loading）的效果。通过设置模态框的样式和位置，配合进度条组件，实现在页面上显示一个居中的加载提示框。并提供了展示和隐藏加载框的JavaScript函数。

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

利用Bootstrap 模态框（Modal）实现loading框效果

<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
    　　
    <div style="width: 200px;height:100px; 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;height:50px; text-align:center;line-height: 50px;font-size:large;">
              数据加载中,请稍候......　　　　
        </div>
        　　
    </div>
</div>

<script>
//展示loading框
showLoading = function ()
{
     $('#loadingModal').modal({backdrop: 'static', keyboard: false});
}
//隐藏掉loading框
hideLoading = function ()
{
     $('#loadingModal').modal('hide');
}
</script>

参考：https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html