问使用引导程序登录/注册页面

EN

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>