フォーム提出後にCSSのみのモーダルウィンドウを開く（または閉じない）

Question

「適用」ボタンのようなスタイルのチェックボックスラベルで開いたCSSのみのモーダルウィンドウ（チェックボックスハック）でフォームを使用しています。フォームにはPerch CMSのPHPコンテンツがあり、正常に動作しています。 Perchは送信後に成功メッセージを返しますが、送信後にページが再ロードされるのを見ると、チェックボックスはチェックされていない状態に戻り、フォームメッセージを表示するにはフォームモーダルを再度開く必要があります。

私は、送信後（またはページの再読み込み後）にモーダルを再度開くか、送信時にモーダルを閉じない方法を探しています。

モーダルを制御するCSSは、デフォルトではそれほど似ている

：CSSはこのなりモーダルを開くに

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

：

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

.modalウィンドウとのdivは.outerであり、そして.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クラス '.hide-show'にはdisplay：none;その唯一の価値として

'p.success-message'にページの初期状態で '.hide-show'が適用されています。つまり、Submitとp.success-messageが表示されていないと、すべてのデフォルトフォームコンテンツ（クラス.form-fieldとp.form-notesを持つdiv）は非表示になります。

独自のForms Appを使用するcmsは、フォームID（form1_など）にプレフィックスを出力してsnafuを追加するので、元のコードのidは出力ページと同じではありませんスクリプト内で許可する必要があります。

私はjsコーダーではありません。実際にはここで何をしているのか分かりませんが、動作します。この方法に欠点がある場合や改善の余地がある場合は、改善してください。