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

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

ただいまの
回答率

87.37%

Bootstrapでモーダルウィンドウを実装したいが上手くいかない

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,578

score 26

実現したいこと

Bootstrapでモーダルウィンドウを実装したい。

問題点

現在下記のページに沿ってモーダルを入れようと思っているのですが、
エラーも出ずにモーダルウィンドウが出てこない現象で困っております。
Bootstrap公式ページ

自身でも調べているのですが、基本コピペでいけるとありますが、
足りていない設定などございますでしょうか?
よろしくお願いいたします。

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<meta content='width=device-width, initial-scale=1, shrink-to-fit=no' name='viewport'>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="1NBi4xKXK7SSCYk/oJRCwJvcROr0YSspBukTsgwv4EtIkmXGSD/lxJ1ZOA5/ywCjHvE0WYLKLEAIfektDRk5Xw==" />
<title>Soudan</title>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link crossorigin='anonymous' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' rel='stylesheet'>
<link rel="stylesheet" media="all" href="/assets/application.self-0760b0caec9a3f061eb68fbab64baa08fc41ec72dd36ce766dbcd9eb49678a37.css?body=1" data-turbolinks-track="reload" />
<script crossorigin='anonymous' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' src='https://code.jquery.com/jquery-3.3.1.slim.min.js'>
<script crossorigin='anonymous' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'>
<script crossorigin='anonymous' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM crossorigin=' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'>
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/rails-ujs.self-8944eaf3f9a2615ce7c830a810ed630e296633063af8bb7441d5702fbe3ea597.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap.self-09d5758928f5b534e7f68535367193f5349e427ade5f252ceac2f52c6d4285be.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/cropper.min.self-c6e3f806ba812080e1fb9fff09b2f5a67155dab41f446edde727427db7012c70.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery-3.4.0.min.self-a3316ed32b95e2f46588733005d9cb77f0b85c8f69118bb382134aa63a0eefb7.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/user.self-ecb67a5e4c005dc42b4def096344fd49ae35604c9f42bc37570a38716f4372d2.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/application.self-50b60e0c43ebd6008b6b4a492f178f9d38e6ce13207e74bc82c7aa61d581e234.js?body=1" data-turbolinks-track="reload"></script>
</head>
<body>
<!-- Button trigger modal -->
<button class='btn btn-primary' data-target='#exampleModal' data-toggle='modal' type='button'>
Launch demo modal
</button>
<!-- Modal -->
<div aria-hidden='true' aria-labelledby='exampleModalLabel' class='modal fade' id='exampleModal' role='dialog' tabindex='-1'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title' id='exampleModalLabel'>Modal title</h5>
<button aria-label='Close' class='close' data-dismiss='modal' type='button'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
...
</div>
<div class='modal-footer'>
<button class='btn btn-secondary' data-dismiss='modal' type='button'>Close</button>
<button class='btn btn-primary' type='button'>Save changes</button>
</div>
</div>
</div>
</div>

</body>
</html>
// モーダル
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

check解決した方法

0

皆さま
ご返信ありがとうございました。
頂いた情報を元に試し、下記の記述を加えることで動きました。
公式にも書いていないですが、色々と難しいですね。

//= require bootstrap-sprockets

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/14 10:58

    せっかくrubyを利用しているならgemの利用をおすすめします。

    「RubyGemsはRuby用のパッケージ管理ツールで、ライブラリの作成や公開、インストールを助けるシステムです。
    このライブラリを使用することで、自分で1からコードを書かなくても簡単に機能を実装することができます。」

    gemを探してなければ、自分で実装という流れが一般的かと。

    //= require bootstrap-sprocketsはgemの公式にも記載されております。
    https://github.com/twbs/bootstrap-rubygem

    キャンセル

0

$('#myModal').on('shown.bs.modal', function () {

id=myModalが指定されている要素は提示のHTMLにはないようです。
基本はdata-targetに指定されているセレクタと同じものを指定する必要があります。
(なのでHTML内のidを変更するのであれば同じように変更する必要があります)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

直接的な回答じゃなくて申し訳ないのですが、Rails+Modalで作ったときに参考にしたサイトを共有させていただきます。
こちらに沿って作成すればRails標準のremote: trueを利用してスマートかと思います。
https://qiita.com/niwaken/items/ffbce52fb024fd369f24

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る