在 Bootstrap 4（模态）对话框上显示加载指示器
我有一个关于 Bootstrap 4 的简单问题，我想在每次用户打开模式时显示一个加载指示器，例如 Twitter。我编写了一些代码，效果很好，但我丢失了一些代码......
按钮 HTML 代码：
<a href="#example_Modal" role="button" data-toggle="modal" data-target="#example_Modal">Click here</a>
模态 HTML 代码
<div class="modal fade" id="example_Modal" tabindex="-1" role="dialog" aria-labelledby="example_ModalLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Preloader -->
<div id="modal-preloader">
<div class="modal-preloader_status">
<div class="modal-preloader_spinner">
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status"></div>
</div>
</div>
</div>
</div>
<!-- End Preloader -->
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
Jquery 代码
$('#example_Modal').on('shown.bs.modal', function () {
$("#modal-preloader").delay(5000).fadeOut(100);
});
正如你在这里看到的，它工作得很好，但我希望当用户关闭模式并再次打开它时，加载指示器微调器每次都显示我想我很好地解释了我想要什么......谢谢
杨魅力1回答
-
幕布斯7119047
您可以通过在模式关闭时定义处理程序来实现这一点。请运行下面的工作代码片段。$('#example_Modal').on('shown.bs.modal', function () { $("#modal-preloader").delay(5000).fadeOut(100);});// reset loading display when modal is closed$('#example_Modal').on('hidden.bs.modal', function (e) { $("#modal-preloader").show();})<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </head> <body> <a href="#example_Modal" role="button" data-toggle="modal" data-target="#example_Modal">Click here</a> <div class="modal fade" id="example_Modal" tabindex="-1" role="dialog" aria-labelledby="example_ModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <!-- Preloader --> <div id="modal-preloader"> <div class="modal-preloader_status"> <div class="modal-preloader_spinner"> <div class="d-flex justify-content-center"> <div class="spinner-border" role="status"></div> </div> </div> </div> </div> <!-- End Preloader --> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body></html>还有其他方法可以通过简单地修改shown.bs.modal句柄来实现这一点，如下所示：$('#example_Modal').on('shown.bs.modal', function () { $("#modal-preloader").show().delay(5000).fadeOut(100);});但当您重新打开模式时，它会出现问题。所以我建议使用hidden.bs.modal重置模式内的加载部分显示。我希望这回答了你的问题。
随时随地看视频慕课网APP
相关分类
Html5