在我的 WordPress v5.8.2 中，我在 Bootstrap modal v4 中有一个自定义 HTML 表单。
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="form" method="POST" class="form">
<input id="name" name="name" class="form-control" type="text" placeholder="Full Name" value="">
<button type="submit" name="form_submit" id="form_submit" class="btn">Submit</button>
</form>
</div>
<div class="modal-footer">
<div id="confirm" class="row d-none">
<div class="col-12 text-center">
<div id="alert" role="alert"></div>
</div>
</div>
</div>
</div>
</div>
</div>
为了用户体验，想要在 div #confirm 中使用以下 jQuery 提交表单后显示确认消息 2 秒:
$(document).on("submit", "#form", function(e) {
$name = $(this).find('input[name=name]').val(); // Name
$("#alert").text('Thank you ' + $name + '.');
$("#confirm").removeClass("d-none");
setTimeout(function() {
$("#modal").modal('hide');
}, 2000);
});
我想在它隐藏之前将模态保持 2 秒，这样我就可以在 #confirm div 中显示消息。然而，模态正在立即关闭。
这是 https://jsfiddle.net/kingBethal/08v2qfa5/10/ .
最佳答案
我建议您使用 button 类型的按钮(而不是 submit 类型的按钮)，然后以编程方式处理表单提交
请看下面的示例代码
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
window.addEventListener('load', () => {
document.getElementById('submitButton').addEventListener('click', () => {
let name = document.getElementById('name').value;
if (name !== '') {
let alertPlaceholder = document.getElementById('alertPlaceholder');
alertPlaceholder.outerHTML = '<div class="alert alert-primary">Thank you, ' + name + '!</div>';
setTimeout(() => { document.getElementById('form').submit(); }, 2000);
}
});
});
</script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Test</button>
<div class="modal" id="exampleModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">This is a test</h5>
</div>
<div class="modal-body">
<div id="alertPlaceholder"></div>
<form id="form">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input class="form-control" id="name" name="name" value="Fabio" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="submitButton">Submit</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://stackoverflow.com/questions/70418333/