Bootstrap Modal未显示在表单提交中

Question

I'd like to display a simple Bootstrap Modal that says "Your message has been sent, thank you" after a form has been submitted. I am using http://formspree.io to handle the form. As per the instructions on formspree.io I've added the following HTML to the form:

<input type="hidden" name="_next" value="//mysite.com/#openmodal" />

This is to redirect users to my modal after form submission. However, the modal is not displaying - the link is redirecting back to the top of my homepage.

Here is the HTML for the modal:

<div class="modal fade" id="openmodal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

How about adding a check to detect if the hash in the url exist, something like:

$(document).ready(function () {
    if (window.location.hash === "#openmodal") {
        $("#openmodal").modal("show");
    }
});