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

Question

我有一个使用 PHP、JQuery 和 CSS 的简单工具，允许用户在数据库中添加和编辑行/记录。

在 Firefox 中，系统运行完美。在 Chrome 和 IE11 中，模态从不隐藏，提交按钮不显示“作业已更新”模态。

对于为什么 FF 是 A-OK 而 Chrome 和 IE11 没有正确显示模式有什么想法吗？

Here's the fiddle ，由于包含的 PHP 而损坏...我愿意接受关于以更好的方式呈现它以供审核的建议。

这是模态 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

尝试将“关闭”按钮设为输入元素:

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

或者你可以添加javascript:

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