2016-10-20 12 views
0

私は宿題の質問を投稿したその男であることは嫌ですが、私は自分のロープの端に当たっています。ブートストラップ/ JQuery:表示するモーダルを得ることができません

私がボタンをクリックするたびに、私は訴えるためにモーダルが必要です。

私が試してみた:

  • データ - *コメントアウト$(#mainModal).modal('show')
  • 使用してJS機能スルーモーダルを表示
  • (以下のコードに見られるように)モーダルを示すの方法ブートストラップのjQueryと競合しないようにjQueryバージョン

インターネット上の何も動作していないようです。モーダルを表示する方法を教えてもらえますか?

ありがとうございます!

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
     <meta charset="UTF-8"> 
     <title>Chatty</title> 

     <!-- Styles --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 

     <style> 

     body { 
      background-color: #333333; 
      padding-top:50px; 
     } 

     h1 { 
      color: white; 
     } 

     body, h1 { 
      padding-bottom: 50px; 
     } 

     .button-spacing { 
      margin-bottom: 50px; 
     } 

     </style> 


     <script> 

     </script> 

    </head> 

    <body class="container"> 

     <h1 class="text-center">Chatty App</h1> 

     <button type="button" class="btn btn-success btn-lg button-spacing col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" data-toggle="modal" data-target="#mainModal">Post New Tweet</button> 

     <!-- Modal --> 
     <div id="mainModal" class="modal fade" role="dialog"> 
      <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 
       </div> 
       <div class="modal-body"> 
       <p>Some text in the modal.</p> 
       </div> 
       <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 

      </div> 
     </div> 
     </div> 

    </body> 

</html> 
+6

あなたは、ブートストラップのJavaScriptファイルをロードされていません。これはモーダルに必要です – Turnip

+0

コンソールにエラーがありますか? – gschambial

+0

エラーを表示しません。 @TurnipのようにJavascriptファイルがロードされていません。 – Brian

答えて

1

あなたはJavascriptファイルをロードしていません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<!-- missing this line --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> 
+0

ありがとう、それはまさに@Turnipが上で述べたものです。 – jtcotton63

0

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Chatty</title> 
 

 
     <!-- Styles --> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     <style> 
 

 
     body { 
 
      background-color: #333333; 
 
      padding-top:50px; 
 
     } 
 

 
     h1 { 
 
      color: white; 
 
     } 
 

 
     body, h1 { 
 
      padding-bottom: 50px; 
 
     } 
 

 
     .button-spacing { 
 
      margin-bottom: 50px; 
 
     } 
 

 
     </style> 
 

 

 
     <script> 
 

 
     </script> 
 

 
    </head> 
 

 
    <body class="container"> 
 

 
     <h1 class="text-center">Chatty App</h1> 
 

 
     <button type="button" class="btn btn-success btn-lg button-spacing col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" data-toggle="modal" data-target="#mainModal">Post New Tweet</button> 
 

 
     <!-- Modal --> 
 
     <div id="mainModal" class="modal fade" role="dialog"> 
 
      <div class="modal-dialog"> 
 

 
      <!-- Modal content--> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h4 class="modal-title">Modal Header</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
       <p>Some text in the modal.</p> 
 
       </div> 
 
       <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </body> 
 

 
</html>

関連する問題