提交表单后重新打开（或不关闭）仅 CSS 模式窗口答案

【问题标题】：Reopen (or not close) css-only modal window after form submit提交表单后重新打开（或不关闭）仅 CSS 模式窗口
【发布时间】：2017-06-17 13:46:10
【问题描述】：

我正在使用样式为“应用”按钮的复选框标签打开的纯 CSS 模式窗口（复选框 hack）中的表单。该表单包含来自 Perch cms 的 php 内容，并且按预期工作正常。 Perch 在提交后返回一条成功消息，但在提交后看到页面重新加载，复选框返回其未选中状态，用户必须重新打开表单模式才能看到成功消息。

我正在寻找一种方法来在提交后（或在页面重新加载后）重新打开模式，或者在提交时不关闭模式。

控制modal的css默认是这样的：

.modal-window .outer {
display: none;  etc.

打开模式后，css 变成这样：

.modal-window .trigger:checked + .outer {
display: block; }

.modal-window 和 .outer 是 div，.trigger 是复选框。

我已在此处阅读了所有类似问题，但无法应用/修改此案例的现有答案。我对 html 和 css 很好，但对 js 很弱。该页面已经为不同的功能加载了 jQuery，因此可以使用它。

【问题讨论】：

现在可能是磨练 jQuery 技能的最佳时机。当页面重新加载时，页面上有什么不同吗？任何查询字符串参数或输入字段值已更改？基于任何更改的值，我们可以触发编写一个 jQuery 脚本并触发弹出窗口。
提交后，模态div中生成的html包含成功消息而不是表单。我不知道查询字符串参数是什么，输入字段不再是 div 表单。这个好用吗？

标签： javascript jquery html css

【解决方案1】：

如果它对任何人有用，我会发布我自己的解决方案。在表单之后使用了一些 jQuery，因此在提交后 css 模式保持打开状态，但隐藏了原始表单并显示成功消息：

<script>
$("#contact-form").submit(function(e){
    e.preventDefault();
    $.ajax({
        type : 'POST',
        data: $("#contact-form").serialize(),
        success : function(){
            $(".form-field, p.form-notes, p.success-message").toggleClass("hide-show 200");
        }
    });
    return false;
});
</script>

ajax 防止表单关闭并防止在提交后重新加载页面并且 css 类 '.hide-show' 具有 display:none;作为它的唯一价值。

“p.success-message”在页面的初始状态中应用了“.hide-show”。所以所有默认的表单内容（带有 .form-field 和 p.form-notes 类的 div）在提交后都被隐藏，并且 p.success-message 被取消隐藏。

cms，Perch，使用自己的Forms App，通过在表单id上输出前缀（例如form1_）来添加一个snafu，所以原代码中的id与输出页面中的id不一样，必须在脚本中允许这样做。

我不是 js 编码员，也不是很了解 ajax 在这里做什么，但它确实有效。如果此方法有缺点或更好的方法，请改进。

【讨论】：