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

尝试制作你的＆＃34;关闭＆＃34;按钮输入元素：

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

或者您可以添加javascript：

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

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

1 个答案: