0

I want to use modal of Bootstrap. I can see modal instantly but it doesn't stay and I get this screen.

I think I have the same problem with this link: What could be causing the Bootstrap modal not to stay on the screen?

These are my codes.

Index.html.erb

<!-- Button trigger modal -->
<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">
  <div class="modal-dialog" 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">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>

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .


// Loads all Bootstrap javascripts
//= require bootstrap

How can I solve this problem?

Community
  • 1
  • 1
김혜진
  • 315
  • 1
  • 4
  • 7
  • did you try adding `//= require bootstrap-sprockets` after `//= require jquery_ujs` – mrvncaragay Sep 01 '16 at 03:23
  • Yes I had wrote `//= require bootstrap-sprockets` after `//=require bootstrap` and it did't make any change. After I read your comment I also wrote `//= require bootstrap-sprockets` after `//= require jquery_ujs` as you mentioned and it's still not working. – 김혜진 Sep 01 '16 at 08:09

1 Answers1

0

I solved my problem. I wrote bootstrap javascript cdn twice. Maybe it was caused the error. application.html.erb

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

I deleted javascript code of 3.3.5 and now modal works.

김혜진
  • 315
  • 1
  • 4
  • 7