Question

我在一个仅限css模式窗口（复选框hack）中使用一个表单，该表单由一个复选框标签打开，其样式类似于＆＃39;应用＆＃39;按钮。该表单具有来自Perch cms的php内容，并且正如预期的那样正常工作。 Perch在提交后返回成功消息但看到在提交后页面被重新加载，复选框返回到未选中状态，用户必须重新打开表单模式才能看到成功消息。

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

默认情况下，控制模态的css是这样的：

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

在打开模态时，css变为：

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

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

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

Answer 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类＆＃39; .hide-show＆＃39;有display：none;作为唯一的价值。

＆＃39; p.success消息＆＃39;有＆＃39; .hide-show＆＃39;应用于页面的初始状态。所以默认表单内容（具有类.form-field和p.form-notes的div）在Submit和p.success-message被取消隐藏后隐藏。

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

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

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

1 个答案: