ポップアップウィンドウを開けませんでした - ブートストラップ

ブートストラップを使用してポップアップウィンドウを作成しようとしましたが、ログインウィンドウを開くボタンをクリックするとポップアップウィンドウが表示されませんでした。私はこのチュートリアルを見て、それが示したのと同じことをしました。私はここでエラーを見つけることができません。誰かがこれで私を助けることができますか？ここにコードがあります。ポップアップウィンドウを開けませんでした - ブートストラップ

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>images</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</head> 
<body> 
    <div class="container"> 

     <h3>Login Demo</h3> 

     <button type="button" class="btn btn-success" data-toggle="modal" data-target="#popUpWindow">open login window</button> 

     <div class="modal fade" id="popUpWindow"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 

        <!--header--> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h2 class="modal-title">Login</h2> 
        </div> 

        <!--body (content)--> 
        <div class="modal-body"> 
         <form role="form"> 
          <div class="form-group"> 
           <input type="email" class="form-control" placeholder="Email"> 
          </div> 
          <div class="form-group"> 
           <input type="password" class="form-control" placeholder="Password"> 
          </div> 
         </form> 
        </div> 

        <!--footer (button)--> 
        <div class="modal-footer"> 
         <button class="btn btn-primary btn-block">Login</button> 
        </div> 

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

    </div> 
</body> 
</html>

出典

2017-02-11 M_TAM

ブートストラップJSファイルの前にjQueryを含める必要があります。 – makshh

'<スクリプト SRC = "https://code.jquery.com/jquery-3.1.1.min.js" 整合性= "SHA256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8は=" crossorigin = "匿名">' – makshh

感謝:)できます。 –

ブートストラップスクリプトを正しく動作させるには、jQueryを追加する必要があります。ただ、ブートストラップスクリプトの前に

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

：最も簡単な方法は次のようにスクリプトタグを追加することです

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

出典

2017-02-11 11:01:28 JChrist

ありがとう:)今私はそれを得た –

それからあなたは解決としてマークすることができますか？ – JChrist

ポップアップウィンドウを開けませんでした - ブートストラップ

答えて

関連する問題