ブートストラップを使用したログイン/サインアップページ

Question

私は、ログイン/サインアップページをアニメーションでデザインしています。

以下は、私が正確にしたいリンクですが、どのコントロールを使用したか分かりません。

更新したサイト： Like here

Answer 1

あなたは簡単にそれを行うことができるように、私は簡単な方法を追加しました。

あなたの側でフォーマットする必要がありますが、私はすでにほとんどすべての可能性をカバーしています。

モーダルについてはthis linkを参照してください。従来のコードを書くのではなく、動的にモーダルを作成するのに役立ちます。

var Loginpage = function() {}; 
 

 
Loginpage.showHideContent = function(id) { 
 
    if (id == 1) { 
 
    $('#signup-div').show(); 
 
    $('#login-div').hide(); 
 
    } else if (id == 2) { 
 
    $('#signup-div').hide(); 
 
    $('#login-div').show(); 
 
    } 
 
} 
 

 

 
Loginpage.showLogin = function(id) { 
 

 
    if (id != undefined && id != null) { 
 
    Loginpage.showHideContent(id); 
 
    } 
 
    var shown_div = $('#signup_login_container'); 
 

 
    BootstrapDialog.show({ 
 
    title: '<img src="https://cdn0.iconfinder.com/data/icons/Pinterest/512/Pinterest_Favicon.png" height="20px" />', 
 
    message: $('#signup_login_container'), 
 
    closeByBackdrop: false, 
 
    onshown: function(dialog) { 
 
     dialog.setSize(BootstrapDialog.SIZE_SMALL); 
 
    }, 
 
    onhide: function() { 
 
     $('#hidden-div').append(shown_div); 
 
    } 
 
    }); 
 

 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css" /> 
 

 

 

 
<button class="btn btn-danger" onclick="Loginpage.showLogin(1)">Sign Up</button> 
 
<button class="btn btn-default" onclick="Loginpage.showLogin(2)">Log in</button> 
 

 
<div id="hidden-div" style="display : none"> 
 

 
    <div class="container-fluid" id="signup_login_container" style="padding :0px 0px"> 
 
    <div id="login-div" style="display : none"> 
 
     <h3 align="center">Log in to see more</h3> 
 
     <br> 
 
     <button type="button" class="btn btn-default btn-block">Continue With Facebook</button> 
 
     <button type="button" class="btn btn-default btn-block">Login With Google</button> 
 

 
     <hr> 
 

 
     <form class="form-horizontal"> 
 
     <div class="form-group"> 
 
      <div class="col-sm-12"> 
 
      <input type="email" class="form-control" id="email" placeholder="Enter email"> 
 
      </div> 
 
     </div> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <div class="form-group"> 
 
      <div class="col-sm-12"> 
 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
 
      </div> 
 
     </div> 
 
     <br> 
 
     <br> 
 
     <div class="form-group"> 
 
      <div class="col-sm-12"> 
 
      <button type="submit" class="btn btn-default btn-block">Submit</button> 
 
      </div> 
 
     </div> 
 
     </form> 
 
     <br> 
 
     <hr> 
 
     <br> 
 
     <div class="row"> 
 
     <div class="col-sm-2"> 
 
     </div> 
 
     <div class="col-sm-8"> 
 
      <button type="button" class="btn btn-default btn-block" onclick="Loginpage.showHideContent(1)">Sign up</button> 
 
     </div> 
 
     <div class="col-sm-2"> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 

 
    <div id="signup-div"> 
 
     <h3 align="center">Sign Up to see more</h3> 
 
     <form class="form-horizontal"> 
 
     <div class="form-group"> 
 
      <div class="col-sm-12"> 
 
      <input type="email" class="form-control" id="email" placeholder="Enter email"> 
 
      </div> 
 
     </div> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <div class="form-group"> 
 
      <div class="col-sm-12"> 
 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
 
      </div> 
 
     </div> 
 
     <br> 
 
     <br> 
 
     <div class="form-group"> 
 
      <div class="col-sm-12"> 
 
      <button type="submit" class="btn btn-default btn-block">Submit</button> 
 
      </div> 
 
     </div> 
 
     </form> 
 
     <br> 
 
     <br> 
 
     <hr> 
 
     <button type="button" class="btn btn-default btn-block">Login With Facebook</button> 
 

 
     <hr> 
 

 
     <div class="row"> 
 
     <div class="col-sm-4"> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <button type="button" class="btn btn-default btn-block" onclick="Loginpage.showHideContent(2)">Log in</button> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 

 

 
    </div> 
 

 
</div> 
 

 

 

 

 

 
<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> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>