模态隐藏在FF但不是Chrome，IE11

Question

I have a simple tool that uses PHP, JQuery, and CSS to allow a user to add and edit rows/records in a database.

In Firefox, the system works perfectly. In Chrome and IE11, the modal is never hidden, and the Submit buttons do not show the "Job is updated" modal.

Any thoughts on why FF is A-OK and Chrome and IE11 are not displaying the modals properly?

Here's the fiddle, broken because of the PHP that's included... I'm open to suggestions for a better way to present it for review.

Here is the modal HTML:

    <div class="modal fade" id="jobsModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <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" id="myModalLabel">Job Details</h4>
      </div>
      <form action="add_job_form.php" id="mainform" method="post" name="mainform">

          <div class="modal-body">
            <input type="hidden" id="job_id" name="job_id" />
            <input type="text" id="job_title" name="job_title" placeholder="Job Title" />
            <textarea id="position_summary" name="position_summary" rows="5" placeholder="Position Summary"></textarea>
            <input type="text" id="duty1" name="duty1" placeholder="Duties &amp; Responsibilities 1" />
            <input type="text" id="duty2" name="duty2" placeholder="Duties &amp; Responsibilities 2" />
            <input type="text" id="duty3" name="duty3" placeholder="Duties &amp; Responsibilities 3" />
            <input type="text" id="duty4" name="duty4" placeholder="Duties &amp; Responsibilities 4" />
            <input type="text" id="duty5" name="duty5" placeholder="Duties &amp; Responsibilities 5" />
            <input type="text" id="duty6" name="duty6" placeholder="Duties &amp; Responsibilities 6" />
            <input type="text" id="duty7" name="duty7" placeholder="Duties &amp; Responsibilities 7" />
            <input type="text" id="duty8" name="duty8" placeholder="Duties &amp; Responsibilities 8" />
            <input type="text" id="edu1" name="edu1" placeholder="Education &amp; Experience 1" />
            <input type="text" id="edu2" name="edu2" placeholder="Education &amp; Experience 2" />
            <input type="text" id="edu3" name="edu3" placeholder="Education &amp; Experience 3" />
            <input type="text" id="edu4" name="edu4" placeholder="Education &amp; Experience 4" />
            <input type="text" id="edu5" name="edu5" placeholder="Education &amp; Experience 5" />
            <input type="text" id="edu6" name="edu6" placeholder="Education &amp; Experience 6" />
            <input type="text" id="edu7" name="edu7" placeholder="Education &amp; Experience 7" />
            <input type="text" id="edu8" name="edu8" placeholder="Education &amp; Experience 8" />              
          </div>

          <div class="modal-footer">
            <div class="row">
                <div class="col-md-6">
                    <input type="password" id="passcode" name="passcode" placeholder="Please enter your passcode"  style="float: left; width:80%; height:35px;" />
                </div>
                <div class="col-md-6">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" id="toggle-save" class="btn btn-primary">Save changes</button>
                </div>
            </div>
          </div>

      </form>
    </div>
  </div>
</div>

Answer 1

Try making your "Close" button an input element:

<input type="button" class="btn btn-default" data-dismiss="modal" value="Close" />

Or you can add javascript:

<script type="text/javascript" >
$('#btnId').click(function () {
    $('#jobsModal').modal('hide');
});
</script>