Erneut öffnen (oder nicht schließen) css-only modales Fenster nach Formular senden

Question

Ich benutze ein Formular in einem css-only modalen Fenster (Checkbox Hack) durch eine Checkbox geöffnet Etikett im Stil wie eine Schaltfläche 'Übernehmen'. Das Formular hat PHP-Inhalt von Perch cms und funktioniert wie erwartet. Perch gibt nach dem Senden eine Erfolgsmeldung zurück, aber da die Seite nach dem Senden erneut geladen wird, kehrt das Kontrollkästchen in den deaktivierten Zustand zurück und der Benutzer müsste das Formular modal erneut öffnen, um die Erfolgsmeldung zu sehen.

Ich bin auf der Suche nach einer Möglichkeit, entweder nach dem Senden (oder nach dem Neuladen der Seite) das Modal wieder zu öffnen, oder das Modal beim Senden nicht zu schließen.

die CSS, die das modal Steuerelemente wie so standardmäßig ist:

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

auf dem modalen Öffnen der CSS wird dies:

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

.modal-Fenster und .outer divs sind, und .trigger ist ein Kontrollkästchen.

Ich habe alle ähnliche Fragen hier gelesen, kann aber die vorhandenen Antworten auf diesen Fall nicht anwenden/ändern. Ich bin gut mit HTML und CSS aber sehr schwach mit js. Die Seite lädt jQuery bereits für eine andere Funktion, sodass sie verwendet werden kann.

Answer 1

Falls es für jemanden nützlich ist, werde ich meine eigene Lösung veröffentlichen. Verwendet, um einige jQuery nach der Form und so Absenden nach der CSS-modal geöffnet bleibt, aber versteckt sich die ursprüngliche Form und zeigt die Erfolgsmeldung:

<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> 

Die Ajax verhindert, dass die Form von Abweisung und verhindert Neuladen der Seite nach Absenden und die CSS Klasse '.hide-show' hat display: none; als sein einziger Wert.

'p.success-message' hat im Anfangszustand der Seite '.hide-show' angewendet. So sind alle Standard-Formularinhalte (divs mit der Klasse .form-field und p.form-notes) nach Submit versteckt und p.success-message ist eingeblendet.

Das cms, Perch, mit seiner eigenen Forms App, fügt ein Snafu durch die Ausgabe eines Präfix auf der Formular-ID (zB form1_), so dass die ID im ursprünglichen Code ist nicht das Gleiche wie in der Ausgabeseite und eins Das muss im Skript berücksichtigt werden.

Ich bin kein Js Coder und verstehe nicht wirklich, was Ajax hier macht, aber es funktioniert. Wenn es einen Nachteil für diese Methode oder einen besseren Weg gibt, verbessern Sie dies bitte.