Question

我在我的应用程序中使用Bootstrap模式，我正在尝试执行股票Bootstrap模式作为概念证明（即从模态工作的基线开始，然后从那里开始构建）。

在我的_notifications.html.erb我有这个：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
  </div>
</div>

问题是，当我点击它时，模态出现的时间为1/10秒，然后消失。

这就是我application.js的样子：

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require best_in_place
//= require main.js
//= require bootstrap
//= require bootstrap-sprockets
//= require jquery-ui/datepicker
//= require best_in_place.jquery-ui
//= require jquery.purr
//= require best_in_place.purr
//= require bootstrap.file-input
//= require chosen.jquery
//= require spin.min
//= require ladda.min
//= require masonry.js
//= require intro.js 
//= require pnotify
//= require turbolinks


$(document).on("ready page:load", function(){
    $("input.datepicker").datepicker();
      /* Activating Best In Place && Include Success Highlighting & Bounce for comments & videos */
        $(".best_in_place").best_in_place().bind("ajax:success", function () {$(this).closest('p, h5').effect('highlight').effect("bounce", { times:3 },  { duration:400}).dequeue(); });
        $('.dropdown-toggle').dropdown();       
      $('#unread-notification').click(function(){
        var url = $(this).data('read-url');
        $.ajax({
          type: "PUT",
          url: url
        });
      });       
});

我已经在我的应用中的每个其他文件中注释掉了所有JS，但仍然没有解决问题。

什么可能导致这种奇怪的行为？

修改1

这些是我Gemfile中的相应元素：

gem 'coffee-rails', '~> 4.0.1'
gem 'jquery-rails', '~> 3.1.0'
gem 'turbolinks'
gem 'bootstrap-sass', '~> 3.2.0.0'
gem 'sass-rails', '>= 3.2'
gem 'jquery-turbolinks'

要进一步排查问题，当我从模态类中删除类fade时，即我的开头div如下所示：

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

模态根本不会发射。

修改2

对于它的价值，当我从JS控制台执行/触发模态时，我可以看到模态......有点儿。如图所示，模态显示，但它似乎在灰色叠加层后面，如下面的屏幕截图所示。

modal if fired by JS console

编辑3

以下是我的bootstrap_and_overrides.css.scss声明：

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";

Answer 1

在调查之后，我检查了你可能遇到的任何问题。我相信你的引导程序在我通过控制台检查时加载了两次，并且每个复制的行总是呈现两个匹配。

另据bootstrap-sass docs

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"

Answer 2

正如arinh所说，问题是Bootstrap被加载了两次。

主要罪魁祸首是application.js：

//= require bootstrap
//= require bootstrap-sprockets

删除顶行后，即刚刚将application.js转换为此内容：

//= require bootstrap-sprockets

效果很好。

什么可能导致Bootstrap模式不留在屏幕上？

2 个答案: