質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

1回答

4999閲覧

railsでmodalが表示できない(bootstrap)

hisataka

総合スコア19

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

1クリップ

投稿2016/08/06 07:48

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">&times;</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関連で必要なものがインストールされていないことが原因かなと考えています。間違いにお気付きの方、ご教授お願いいたします…

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

もしかしたら既に解決済みかもしれませんが……

buttonの閉じタグが"butto"になっているからではないでしょうか。

HTML

1<button class="btn btn-primary btn-lg btn-block"data-toggle="modal" data-target="#createTicket"> 2 参加する 3</button>

投稿2016/08/25 07:03

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問