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

i using bootstrap modal in app, , trying execute stock bootstrap modal proof of concept (i.e. start @ baseline modal works , build there).

in _notifications.html.erb 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 when click it, modal appears 1/10th of second , disappears.

this 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 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 js in every other file in app, still hasn't solved issue.

what causing weird behavior?

edit 1

these appropriate elements in 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 troubleshooting 1 step further, when remove class fade modal class, i.e. opening div looks this:

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

the modal doesn't fire @ all.

edit 2

for it's worth, when execute/fire modal js console, can see modal...kinda. in, modal shows, seems behind grey overlay, can see in screenshot below.

edit 3

here bootstrap_and_overrides.css.scss declarations:

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

after looking into, checked out issues having. believe bootstrap loaded twice checked through console , each copied line presented 2 matches always.

also according bootstrap-sass docs

// "bootstrap-sprockets" must imported before "bootstrap" , "bootstrap/variables"