부트 스트랩을 사용하는 로그인/SignUp 페이지

Question

애니메이션으로 로그인/SignUp 페이지를 디자인하고 있습니다.

아래 링크는 내가 정확히 원하는 링크이지만 어떤 컨트롤을 사용했는지 잘 모르겠습니다.

업데이트] 사이트 : 당신은 쉽게 할 수 있도록 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>