我有一个简单的 html 页面，其中包含一个打开模式窗口的链接。 在模态窗口中是一个表单。 如何提交表单并在同一模式窗口中显示“表单操作 (test.asp)”页面。 test.asp 页面为数据库入口/感谢您填写表单页面。
<!DOCTYPE html>
<style>
#overlay {
visibility: hidden; position: absolute; left: 0px;top: 0px; width:100%; height:100%; text-align:center; z-index: 1000;
}
#overlay div {width:300px; margin: 100px auto; background-color: #fff; border:1px solid #000; padding:15px; text-align:center;
}
</style>
<script>
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
<body>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
<div id="overlay">
<div>
<p>Please complete the form below.</p>
<form action="test.asp" method="post" id="contact-form">
<input type="text" name="field1"><br>
<input type="text" name="field2"><br>
<input type="submit" value="Go">
</form><br>
Click here to [<a href='#' onclick='overlay()'>close</a>]<br>
</div>
</div>
</body>
</html>
最佳答案
尝试使用 javascript 函数 event.preventDefault() 来防止模态关闭:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility =
(el.style.visibility == "visible" ? "hidden" : "visible");
document.getElementById("submit").addEventListener("click",
function(event){
event.preventDefault();
}
);
} #overlay {
visibility: hidden; position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%; text-align:center; z-index: 1000;
}
#overlay div {
width: 300px; margin: 100px auto; background-color: #fff;
border: 1px solid #000; padding: 15px; text-align: center;
}<!DOCTYPE html>
<html>
<body>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
<div id="overlay">
<div>
<p>Please complete the form below.</p>
<form action="test.asp" method="post" id="contact-form">
<input type="text" name="field1"><br>
<input type="text" name="field2"><br>
<input type="submit" id="submit" value="Go">
</form><br>
Click here to [<a href='#' onclick='overlay()'>close</a>]<br>
</div>
</div>
</body>
</html>之后，使用 Jquery 发出 AJAX 请求，以便在同一窗口中加载下一页:
$.ajax({
url: '/path/to/file',
type: 'default GET (Other values: POST)',
dataType: 'default: Intelligent Guess (Other values: xml, json, script, html)',
data: {param1: 'value1'},
}).done(function() {
console.log("success");
}).fail(function() {
console.log("error");
}).always(function() {
console.log("complete");
});
关于javascript - 如何在表单提交后保持模态窗口打开并在同一模态窗口中显示新页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38395745/