引导模式在 Firefox 上不起作用答案

【问题标题】：Bootstrap modal not working on Firefox引导模式在 Firefox 上不起作用
【发布时间】：2018-06-13 00:39:05
【问题描述】：

我已经使用 Bootstrap 创建了两个模态，它们是使用带有 Ajax 请求数据的 jQuery 打开的。问题是这些模式在 Google Chrome 上正常工作，但在 Firefox 上不工作。我该如何解决？

我的代码如下：

$(document).on("click", "#file_popup", function() {
  $.ajax({
    url: "fileshare.php",
    method: "post",
    dataType: 'text',
    success: function(data) {
      $("#tbl_content").html(data);
      jQuery.noConflict();
      $("#pp_filedownload").modal('show');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="pp_filedownload" role="dialog" hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <strong class="modal-title">File Download</strong>
      </div>
      <div class="modal-body" id='tbl_content'>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

@Mr.x：总体上很好的编辑，但 FWIW 是 jQuery，而不是 jquery，并且像 Google 和 Firefox 这样的专有名称最初都是大写的，而不是全小写的。（如果您似乎收到有关您的编辑的异常反馈，可能是因为 MSO 上的this post。）
当您将代码作为 sn-p 发布时，请确保它确实在此处作为独立的 sn-p 工作。当我运行sn-p时，什么都没有出现，从JavaScript代码来看，尝试也没有多大意义。
为什么是“jQuery.noConflict();”在成功回调中？

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

我尝试了一个示例，它在所有浏览器中都可以正常工作。试试这个，可能对你有帮助

//You can launch the modal with the code below this.

$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <input type="submit" id="submitButton"/>

 <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

【讨论】：

我的代码正在运行，但不是突然，在 Firefox 中打开页面，几秒钟后它正在打开，如果没有，应该在第一次加载后刷新页面。我认为 jquery 不会立即响应。谢谢大家。