我有一個關(guān)于 Bootstrap 4 的簡單問題，我想在每次用戶打開模式時顯示一個加載指示器，例如 Twitter。我編寫了一些代碼，效果很好，但我丟失了一些代碼......按鈕 HTML 代碼：<a href="#example_Modal" role="button" data-toggle="modal" data-target="#example_Modal">Click here</a>模態(tài) 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);});正如你在這里看到的，它工作得很好，但我希望當(dāng)用戶關(guān)閉模式并再次打開它時，加載指示器微調(diào)器每次都顯示我想我很好地解釋了我想要什么......謝謝
1 回答
幕布斯7119047
TA貢獻1794條經(jīng)驗 獲得超8個贊
您可以通過在模式關(guān)閉時定義處理程序來實現(xiàn)這一點。請運行下面的工作代碼片段。
$('#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句柄來實現(xiàn)這一點，如下所示：
$('#example_Modal').on('shown.bs.modal', function () {
$("#modal-preloader").show().delay(5000).fadeOut(100);
});
但當(dāng)您重新打開模式時，它會出現(xiàn)問題。所以我建議使用hidden.bs.modal重置模式內(nèi)的加載部分顯示。
我希望這回答了你的問題。
- 1 回答
- 0 關(guān)注
- 142 瀏覽
添加回答
舉報
0/150
提交
取消