Reopen (or not close) css-only modal window after form submit

Question

I'm using a form in a css-only modal window (checkbox hack) opened by a checkbox label styled like an 'Apply' button. The form has php content from Perch cms and is working fine, as expected. Perch returns a success message after submit but seeing as the page is re-loaded after submit the checkbox returns to its unchecked state and the user would have to re-open the form modal to see the success message.

I'm looking for a way to either re-open the modal after submit (or after page reload), or not close the modal on submit.

The css that controls the modal is like so by default:

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

On opening the modal the css becomes this:

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

.modal-window and .outer are divs, and .trigger is a checkbox.

I've read all similar questions here but cannot apply/modify the existing answers to this case. I'm good with html and css but very weak with js. The page already loads jQuery for a different function, so it could be used.

Answer 1

In case it's useful to anyone I'll post my own solution. Used some jQuery after the form and so after Submit the css modal stays open, but hides the original form and shows the success message:

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

The ajax prevents the form from dismissing and prevents page reload after Submit and the css class '.hide-show' has display:none; as its only value.

'p.success-message' has '.hide-show' applied in page's initial state. So all default form content (divs with class .form-field and p.form-notes) are hidden after Submit and p.success-message is unhidden.

The cms, Perch, using its own Forms App, adds a snafu by outputting a prefix on the form id (eg, form1_), so the id in the original code is not the same as in the output page and one must allow for that in the script.

I'm not a js coder and don't really understand what ajax is doing here, but it works. If there's a drawback to this method or a better way, please improve this.