我在到期时间前 2 分钟打开了模态。我希望在 2 分钟后，模式将再次关闭并重定向到一个网址。怎么做？任何帮助将不胜感激。
document.addEventListener("DOMContentLoaded", function() {
var expiryTime = `{{ request.session.get_expiry_age }}`;
var openModalTime = (expiryTime - 120) * 1000;
// This part is working fine:
------------------------------------
setTimeout(function() {
$('#sessionTimeoutModal').modal('show');
}, openModalTime);
//----------------------------------
setTimeout(function() {
$('#sessionTimeoutModal').modal('hide');
window.location.href = "{% url 'login' %}";
}, (openModalTime + 121) * 1000);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Session Timeout Modal Example</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Session Timeout Modal -->
<div class="modal fade" id="sessionTimeoutModal" tabindex="-1" aria-labelledby="sessionTimeoutModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="sessionTimeoutModalLabel">Session Timeout</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Your session is about to expire.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var expiryTime = 3; // Hardcoded expiry time for demonstration (5 minutes)
var openModalTime = (expiryTime - 120) * 1000; // Time to open modal before expiry (2 minutes before expiry)
// Show the modal at the specified 'openModalTime'
setTimeout(function() {
var modalElement = document.getElementById('sessionTimeoutModal');
var sessionTimeoutModal = new bootstrap.Modal(modalElement);
sessionTimeoutModal.show();
}, openModalTime);
// Hide the modal and redirect at 'expiryTime'
setTimeout(function() {
var modalElement = document.getElementById('sessionTimeoutModal');
var sessionTimeoutModal = new bootstrap.Modal(modalElement);
sessionTimeoutModal.hide();
window.location.href = "login.html"; // Redirect to a hardcoded login page
}, expiryTime * 1000);
});
</script>
</body>
</html>在这里我创建了一个小例子。我已经对这些值进行了硬编码，请将它们更改为变量。