2016-09-01 7 views
0

私はブートストラップのモーダルを使いたいです。 私はモーダルを即座に見ることができますが、それは残っておらず、この画面が表示されます。 What could be causing the Bootstrap modal not to stay on the screen?私のルビープロジェクトでブートストラップモーダルが残っていません

これらは私のコードです:

は、私は、このリンクと同じ問題を抱えていると思います。

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 

どのように私はこの問題を解決することができますか?

+0

あなたは '// = require jquery_ujs'の後に' // = require bootstrap-sprockets'を追加しましたか? – mrvncaragay

+0

はい '// = require bootstrap'の後に' // = require bootstrap-sprockets'を書きましたが、何か変更を加える。私があなたのコメントを読んだ後、あなたが言及したように '// = require jquery_ujs'の後に' // = require bootstrap-sprockets'を書きましたが、まだ動作していません。 –

答えて

0

私は私の問題を解決しました。私はブートストラップjavascript cdnを2回書いた。多分それはエラーを引き起こしました。 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> 

私は3.3.5となりましたモーダル作品のjavascriptのコードを削除しました。

関連する問題