railsでmodalを作ろうと思っていますがうまくいきません。
show.html.erb
html
1<button class="btn btn-primary btn-lg btn-block"data-toggle="modal" data-target="#createTicket"> 2 参加する 3</butto> 4<div class="modal fade" id="createTicket" tabindex="-1" role="dialog" aria-labelledby="dialogHeader" aria-hidden="true"> 5 <div class="modal-dialog"> 6 <div class="modal-content"> 7 <div class="modal-header"> 8 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 9 <h4 class="modal-title" id="dialogHeader">参加コメント</h4> 10 </div> 11 <div class="modal-body"> 12 ボディ 13 </div> 14 <div class="modal-footer"> 15 フッター 16 </div> 17 </div> 18 </div> 19</div> 20
headderとfooterは別のレイアウトを使っています。
画像の通り、モーダルの中に表示させたいものがfadeではなく普通にページに表示されてしまっている次第です。
他にも原因がありそうな場所のコードを記載させていただきます。
Gemfile
ruby
1source 'https://rubygems.org' 2 3 4# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 5gem 'rails', '4.2.4' 6# Use sqlite3 as the database for Active Record 7gem 'sqlite3' 8# Use SCSS for stylesheets 9gem 'sass-rails', '~> 5.0' 10# Use Uglifier as compressor for JavaScript assets 11gem 'uglifier', '>= 1.3.0' 12# Use CoffeeScript for .coffee assets and views 13gem 'coffee-rails', '~> 4.1.0' 14# See https://github.com/rails/execjs#readme for more supported runtimes 15gem 'therubyracer', platforms: :ruby 16 17# Use jquery as the JavaScript library 18gem 'jquery-rails' 19# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks 20gem 'turbolinks' 21# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 22gem 'jbuilder', '~> 2.0' 23# bundle exec rake doc:rails generates the API under doc/api. 24gem 'sdoc', '~> 0.4.0', group: :doc 25 26gem 'bootstrap-sass', '3.2.0.0' 27 28gem 'twitter' 29gem 'oauth' 30gem 'omniauth-twitter' 31 32gem "carrierwave" 33gem 'rmagick', require: 'rmagick' 34 35 36 37gem 'acts-as-taggable-on', '~> 3.4' 38 39gem 'kaminari', '~> 0.15.1' 40gem 'kaminari-bootstrap', '~> 3.0.1' 41 42 43 44# Use ActiveModel has_secure_password 45# gem 'bcrypt', '~> 3.1.7' 46 47# Use Unicorn as the app server 48# gem 'unicorn' 49 50# Use Capistrano for deployment 51# gem 'capistrano-rails', group: :development 52 53 54group :development, :test do 55 # Call 'debugger' anywhere in the code to stop execution and get a debugger console 56 gem 'debugger' 57end 58 59group :development do 60 # Access an IRB console on exception pages or by using <%= console %> in views 61 gem 'web-console', '~> 2.0' 62 63 # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring 64 gem 'spring' 65end
application.js
js
1// This is a manifest file that'll be compiled into application.js, which will include all the files 2// listed below. 3// 4// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 5// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 6// 7// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 8// compiled file. 9// 10// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 11// about supported directives. 12// 13//= require jquery 14//= require jquery_ujs 15//= require bootstrap 16//= require turbolinks 17//= require_tree .
application.css
css
1/* 2 * This is a manifest file that'll be compiled into application.css, which will include all the files 3 * listed below. 4 * 5 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 6 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 7 * 8 * You're free to add application-wide styles to this file and they'll appear at the bottom of the 9 * compiled file so the styles you add here take precedence over styles defined in any styles 10 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new 11 * file per style scope. 12 * 13 *= require_tree . 14 *= require_self 15 */``` 16 17 18他のアプリケーションでこのコードでやっても同じような結果になったことから、コードが間違っているかbootstrap関連で必要なものがインストールされていないことが原因かなと考えています。間違いにお気付きの方、ご教授お願いいたします…
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。