2017-02-11 126 views
0

我试图使用引导创建弹出窗口,当我单击打开的登录窗口按钮弹出窗口没有显示出来。我做了这个观看教程,并做了同样的事情。我在这里找不到错误。有人可以帮我弄这个吗?这是代码。未打开弹出窗口 - 引导

<!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> 
+0

之前已引导JS文件,包括jQuery的。 – makshh

+0

'<脚本 SRC = “https://code.jquery.com/jquery-3.1.1.min.js” 完整性= “SHA256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8 =” crossorigin = “匿名”>' – makshh

+0

感谢:)有用。 –

回答

0

您应该为引导脚本添加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> 
+0

谢谢:)现在我明白了 –

+0

那么也许你可以标记为解决? – JChrist