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

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

ただいまの
回答率

89.63%

Bootstrapにてmodalが表示されない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 9,895

toshikase

score 5

Bootstrapを用いてmodalを表示したいです。
以下の記事を参考にしました。
http://getbootstrap.com/javascript/#modals-examples
しかし、以下のコードを書きましたが表示されません。
どこに問題がありますでしょうか?


#app/views/homes/home.html.erb
<div class="row">
  <div class="col-md-11 col-md-offset-1">
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Modal起動</a>
    <!-- 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>
    <%= render 'layouts/question_card' %>
  </div>
</div>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

ブロックの構成は以下のような感じです。 

ボタンの data-target のIDにjQueryの様に、#を付けてみてください。(例では data-target="#MODAL1" です)

ここで指定するIDは画面を出す class="modal fade" で指定されたDIVに付けたIDに紐づきます。
ただ、モーダル側DIVのIDには#はいりません。(例では id="MODAL1"です)

こちらのガイドがとてもわかりやすいです

  <!-- モーダルウィンドウを起動するボタン -->
  <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#MODAL1">MODAL</button><br>

  <!-- ここからモーダル -->
  <div class="modal fade" id="MODAL1">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
            ヘッダ
        </div>
        <div class="modal-body">
            ボディ
        </div>
        <div class="modal-footer">
            フッター
        </div>

      </div> <!-- modal-content -->
    </div>  <!-- modal-dialog -->
  </div>  <!-- modal fade -->

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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