表单提交后如何保持模式窗口打开并在同一模式窗口中显示新页面答案

【问题标题】：How to keep modal window open after form submit and display new page in same modal window表单提交后如何保持模式窗口打开并在同一模式窗口中显示新页面
【发布时间】：2016-07-15 12:07:38
【问题描述】：

我有一个简单的 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>

【问题讨论】：

这里应该使用AJAX，一旦表单提交成功覆盖模态框的内容。

标签： javascript jquery html css

【解决方案1】：

尝试使用 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");
});

【讨论】：