2017-02-28 45 views
0

我正在创建登录页面和注册也用忘了密码。如果用户单击忘记密码新弹出将打开我使用Bootstrap。我累了当点击忘记密码现在不打开流行向上。我也尝试不同的方法它不工作。莫代尔弹出不工作使用引导

<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>Daily UI - Day 1 Sign In</title> 
 

 
\t <!-- Google Fonts --> 
 
\t <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Lato:400,100,300,700,900' rel='stylesheet' type='text/css'> 
 

 
\t <link rel="stylesheet" href="css/animate.css"> 
 
\t <!-- Custom Stylesheet --> 
 

 
\t  <link rel="shortcut icon" href="../favicon.ico"> 
 
     <link rel="stylesheet" type="text/css" href="css/demo.css" /> 
 
     <link rel="stylesheet" type="text/css" href="css/style1.css" /> 
 
\t \t <link rel="stylesheet" type="text/css" href="css/style.css" /> 
 
\t \t <link rel="stylesheet" type="text/css" href="css/animate-custom.css" /> 
 
\t \t <link rel="stylesheet" type="text/css" href="css/Modal.css"/> 
 

 
\t \t 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
\t 
 
</head> 
 

 
<body style="overflow:hidden;"> 
 
\t <div class="container"> 
 
     
 
      <header> \t \t 
 
      </header> 
 
      <section> \t \t \t \t 
 
       <div id="container_demo"> 
 
        
 
        <a class="hiddenanchor" id="toregister"></a> 
 
        <a class="hiddenanchor" id="tologin"></a> 
 
        <div id="wrapper"> 
 
         <div id="login" class="animate form"> 
 
          
 
           <h1>Log in</h1> 
 
           <p> 
 
            <label for="username" class="uname" data-icon="u" > Your email or username </label> 
 
            <input id="username" name="username" required="required" type="text" placeholder="myusername or [email protected]"/> 
 
           </p> 
 
           <p> 
 
            <label for="password" class="youpasswd" data-icon="p"> Your password </label> 
 
            <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> 
 
           </p> 
 
           <p class="keeplogin"> 
 
\t \t \t \t \t \t \t \t \t <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
 
\t \t \t \t \t \t \t \t \t <label for="loginkeeping">Keep me logged in</label> 
 
\t \t \t \t \t \t \t \t </p> 
 
           <p class="login button"> 
 
            <input type="submit" id="myBtn" value="Login In" /> 
 
\t \t \t \t \t \t \t \t   <!-- The Modal --> 
 

 
\t \t \t \t \t \t \t \t </p> \t 
 
          
 
           
 
          
 
           <p class="change_link"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="list-group-item" data-toggle="modal" data-target="#myModal">Forgot my password</a> 
 
          \t  
 
\t \t \t \t \t \t \t \t \t <a href="#toregister" class="to_register">Join us</a> 
 
\t \t \t \t \t \t \t \t </p> 
 
          
 
           </div> \t 
 
\t \t \t \t \t \t \t  
 
\t \t \t \t \t \t \t  
 
\t \t \t \t \t \t \t  
 
\t \t \t \t \t \t \t <div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
 
    <div class="modal-dialog modal-sm"> 
 
    <div class="modal-content"> 
 
     <p>modal popup</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
\t \t \t \t \t \t \t  
 
\t \t \t \t \t \t \t  
 
\t \t \t \t \t \t 
 
         <div id="register" class="animate form"> 
 
           
 
           <h1> Sign up </h1> 
 
           <p> 
 
            <label for="usernamesignup" class="uname" data-icon="u">Your username</label> 
 
            <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" /> 
 
           </p> 
 
           <p> 
 
            <label for="emailsignup" class="youmail" data-icon="e" > Your email</label> 
 
            <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="[email protected]"/> 
 
           </p> 
 
           <p> 
 
            <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label> 
 
            <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/> 
 
           </p> 
 
           <p> 
 
            <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label> 
 
            <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/> 
 
           </p> 
 
           <p class="signin button"> 
 
\t \t \t \t \t \t \t \t \t <input type="submit" value="Sign up"/> 
 
\t \t \t \t \t \t \t \t </p> 
 
\t \t \t \t \t \t \t 
 
           <p class="change_link"> 
 
\t \t \t \t \t \t \t   
 
\t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t <a href="#tologin" class="to_register"> Go and log in </a> 
 
\t \t \t \t \t \t \t \t </p> 
 
          
 
         </div> 
 
\t \t \t \t \t \t 
 
        </div> \t \t \t 
 
       </div> 
 
</body>

当点击忘记密码没有显示。请帮帮我 ?我在哪里做错误如何解决这个问题?

+1

可能的[Bootstrap模式不起作用]的副本(http://stackoverflow.com/questions/23713414/bootstrap-modal-doesnt-wor k) – JJJ

回答

1

引导之前加入jQuery库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 

注: -

YOUT HTML代码似乎伴随着很凌乱(多个未封闭的元素请更正它们)

+0

当然我会检查 – sripriya

+0

工作谢谢 – sripriya

+0

@sripriya很高兴帮助你:) :) –

2

您需要把jQuery脚本的引导上面一个

+1

谢谢先生@Jose Manuel Lucas – sripriya