What could be causing the Bootstrap modal not to stay on the screen?

Question

I am using the Bootstrap modal in my app, and I am trying to execute the stock Bootstrap Modal as a proof of concept (i.e. start at the baseline that the modal works and then build up from there).

In my _notifications.html.erb I have this:

<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>

The issue is when I click it, the modal appears for like 1/10th of a second and then disappears.

This is what my application.js looks like:

//= 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
        });
      });       
});

I have commented out all the JS in every other file in my app, but that still hasn't solved the issue.

What could be causing this weird behavior?

Edit 1

These are the appropriate elements in my 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'

To take the troubleshooting 1 step further, when I remove the class fade from the modal class, i.e. my opening div looks like this:

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

The modal doesn't fire at all.

Edit 2

For what it's worth, when I execute/fire the modal from the JS console, I can see the modal...kinda. As in, the modal shows, but it seems to be behind the grey overlay, as you can see in the screenshot below.

Edit 3

Here is my bootstrap_and_overrides.css.scss declarations:

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

Answer 1

After looking into, I checked out any issues you could be having. I believe your bootstrap is loaded twice as I checked through the console and each copied line presented two matches always.

Also according to bootstrap-sass docs

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

Answer 2

As arinh said, the issue is that Bootstrap was being loaded twice.

The main culprit was my application.js:

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

Once I removed the top line, i.e. just converted my application.js to this:

//= require bootstrap-sprockets

It worked perfectly.