HTMLブートストラップで拡張可能なモーダルを作成する方法

ログインボタンをクリックするとポップアウトし、自分の情報を挿入するフォームが含まれています。一方、モーダルでは最初に表示したくない別のフォームがありますが、ユーザーが新しいページに行くのではなくアカウントを作成してクリックすると、その新しいフォームを私のモーダルのボディ。もしそうなら、それは可能ですか？ここに私のモーダルを一度にコード化されている方法です。HTMLブートストラップで拡張可能なモーダルを作成する方法

[![<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog modal-lg"> 
<div class="modal-content"> 
<div class="modal-header" style="background-color: #222"> 
<div class="mu-title"> 
<span class="mu-subtitle">Login</span> 
</div> 
</div> 
<!-- Body of the modal --> 
<div class="modal-body" style="background-color: #222"> 
<form id="loginForm" method="POST" action="login.php" novalidate="novalidate"> 
<div class="form-group"> 
<label for="username" class="control-label" style="color: white">Username</label> 
<input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="[email protected]"> 
<span class="help-block"></span> 
</div> 
          <div class="form-group"> 
           <label for="password" class="control-label" style="color: white">Password</label> 
           <input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password"> 

          </div> 
          <div class="form-group"> 
           <p style="color: white ">If you have forgatten your cridentials please feel free to contact "018 316 0991"</p> 

          </div> 





    </div> 








    <div class="modal-footer" style="background-color: #222"> 


     <button type="submit" class="mu-readmore-btn">Login</button> 

    </div> 
    </form> 
    </div>][1]][1]

出典

2017-01-22 Danial Kosarifa

の下に、あなたはとのトラブルを正確に何を持っていますか？他のDOM要素を追加するのと同じように、登録フォームをモーダル本体に追加するだけです。 – DavidDomain

私はアカウントを持っていないのでオプションを追加して、ユーザがそれをクリックするとフォームを表示します。他の賢明なのは、フォームにしかログインする必要はありません;）@DavidDomain –

これは、ブートストラップモーダルで二つの形式のショーと非表示を行うことができます。

例

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Login</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-body"> 
 
\t \t \t <div class="row"> 
 
      <div id="loginbox" class="mainbox col-md-12 col-sm-12 ">      
 
      <div class="panel panel-info" > 
 
        <div class="panel-heading"> 
 
         <div class="panel-title">Sign In</div> 
 
         <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div> 
 
        </div>  
 

 
        <div style="padding-top:30px" class="panel-body" > 
 

 
         <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div> 
 
          
 
         <form id="loginform" class="form-horizontal" role="form"> 
 
            
 
          <div style="margin-bottom: 25px" class="input-group"> 
 
             <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
             <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">           
 
            </div> 
 
           
 
          <div style="margin-bottom: 25px" class="input-group"> 
 
             <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
 
             <input id="login-password" type="password" class="form-control" name="password" placeholder="password"> 
 
            </div> 
 
            
 

 
           
 
          <div class="input-group"> 
 
             <div class="checkbox"> 
 
             <label> 
 
              <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me 
 
             </label> 
 
             </div> 
 
            </div> 
 

 

 
           <div style="margin-top:10px" class="form-group"> 
 
            <!-- Button --> 
 

 
            <div class="col-sm-12 controls"> 
 
             <a id="btn-login" href="#" class="btn btn-success">Login </a> 
 

 

 
            </div> 
 
           </div> 
 

 

 
           <div class="form-group"> 
 
            <div class="col-md-12 control"> 
 
             <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" > 
 
              Don't have an account! 
 
             <a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()"> 
 
              Sign Up Here 
 
             </a> 
 
             </div> 
 
            </div> 
 
           </div>  
 
          </form>  
 

 

 

 
         </div>      
 
        </div> 
 
     </div> 
 
     <div id="signupbox" style="display:none; " class="mainbox col-md-12 col-sm-12"> 
 
        <div class="panel panel-info"> 
 
         <div class="panel-heading"> 
 
          <div class="panel-title">Sign Up</div> 
 
          <div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div> 
 
         </div> 
 
         <div class="panel-body" > 
 
          <form id="signupform" class="form-horizontal" role="form"> 
 
           
 
           <div id="signupalert" style="display:none" class="alert alert-danger"> 
 
            <p>Error:</p> 
 
            <span></span> 
 
           </div> 
 
            
 
           
 
            
 
           <div class="form-group"> 
 
            <label for="email" class="col-md-3 control-label">Email</label> 
 
            <div class="col-md-9"> 
 
             <input type="text" class="form-control" name="email" placeholder="Email Address"> 
 
            </div> 
 
           </div> 
 
            
 
           <div class="form-group"> 
 
            <label for="firstname" class="col-md-3 control-label">First Name</label> 
 
            <div class="col-md-9"> 
 
             <input type="text" class="form-control" name="firstname" placeholder="First Name"> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label for="lastname" class="col-md-3 control-label">Last Name</label> 
 
            <div class="col-md-9"> 
 
             <input type="text" class="form-control" name="lastname" placeholder="Last Name"> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label for="password" class="col-md-3 control-label">Password</label> 
 
            <div class="col-md-9"> 
 
             <input type="password" class="form-control" name="passwd" placeholder="Password"> 
 
            </div> 
 
           </div> 
 
            
 
           <div class="form-group"> 
 
            <label for="icode" class="col-md-3 control-label">Invitation Code</label> 
 
            <div class="col-md-9"> 
 
             <input type="text" class="form-control" name="icode" placeholder=""> 
 
            </div> 
 
           </div> 
 

 
           <div class="form-group"> 
 
            <!-- Button -->           
 
            <div class="col-md-offset-3 col-md-9"> 
 
             <button id="btn-signup" type="button" class="btn btn-info"><i class="icon-hand-right"></i> &nbsp Sign Up</button> 
 
             
 
            </div> 
 
           </div> 
 
           
 
           
 
           
 
           
 
           
 
          </form> 
 
         </div> 
 
        </div> 
 

 
       
 
       
 
       
 
     </div> 
 
     </div> 
 
\t \t </div> \t 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

出典

2017-01-22 13:59:49

HTMLブートストラップで拡張可能なモーダルを作成する方法

答えて

関連する問題