我有一个关于 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
TA贡献1794条经验 获得超8个赞
您可以通过在模式关闭时定义处理程序来实现这一点。请运行下面的工作代码片段。
$('#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重置模式内的加载部分显示。
我希望这回答了你的问题。
- 1 回答
- 0 关注
- 47 浏览
添加回答
举报
0/150
提交
取消