[Code] Code popup login style ForumUS

Demo

Code:

http://tldemo.xyz/forumus/default-version/

Cách làm

APC >> Display >> Templates >> Quản lý tổng thể >> overall_header

Thêm vào cuối overall_header code sau :

Code:

<div class="overlay" style="opacity: 0.6; position: fixed; width: 100%; height: 2000px; z-index: 999999999999999999999; top: 0px; left: 0px; display: none; background-color: rgb(0, 0, 0);">
</div>
<a href="/login">Loggin</a>
<div class="modal-dialog">
  <div class="modal-content" style="display:none">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    <div class="modal-header">
      <i class="fa fa-user"></i>Đăng nhập
    </div>
    <div class="modal-body">
      <form action="/login" method="post" novalidate="novalidate">
        <input type="text" name="username" placeholder="Tên đăng nhập" class="form-control">
        <input type="password" name="password" placeholder="Mật khẩu" class="form-control">
        <input type="submit" name="login" value="Đăng nhập" class="submit-btn">
        <input type="hidden" name="redirect" value="/">

      </form>
    </div>
  </div>
</div>
<script>
  $(function() {
    $("a[href='/login']").click(function(event) {
      event.preventDefault();
      $(".overlay").animate({
        'opacity': '0.6'
      }, 200).fadeIn(500);
    });
    $(".overlay").click(function() {
      $(".overlay,.modal-content").fadeOut(500);
    });
    $("a[href='/login']").click(function() {
      $(".modal-content").fadeIn(380);
    });
    $(".modal-content button.close").click(function() {
      $(".modal-content,.overlay").fadeOut(500);
    });
  })(jQuery);

</script>
 <script type="text/javascript">//<![CDATA[
$(function() {
   var path = location.pathname,
      $login = $('form[action="/login"]');
   if (path !== "/" && path !== "/forum" && path !== "/login" && path !== "/register" && _userdata.session_logged_in === 0 && $login.length) {
      $login.append('<input type="hidden" name="redirect" value="' + path + '">');
   }
});
   //]]></script>

Thêm vào CSS code sau :

Code:

/*Login-rip by giut*/
.modal-dialog {
    position: fixed;
    top: 34%;
    left: 39%;
    z-index: 999999999999999999!Important;
    width: 23%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif!important;
}
.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
.modal-content button.close {
    position: absolute;
    top: -10px;
    right: -20px;
    filter: alpha(opacity=100);
    color: #fff;
    font-size: 28px;
    font-weight: 100;
    color:white!Important;
    opacity: 1;
    outline: 0;
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
}
.modal-header {
    color: #fff;
    background-color: #03a9f4;
    border: none;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    padding: 15px;
}
.modal-header i {
    margin-right: 8px;
}
.modal-body .form-control {
    border-radius: 0;
    margin-bottom: 15px;
    width: 89%;
    box-shadow: none;
    border: 1px solid #DDD!Important;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif!important;
}
.modal-body .submit-btn {
    color: #fff;
    background-color: #293a4a;
    padding: 10px 30px;
    border: none;
    text-transform: uppercase;
    outline: 0;
    -webkit-transition: background-color .25s ease-in-out;
    transition: background-color .25s ease-in-out;
}
.modal-body .submit-btn:hover {
    background: #03a9f4;
  cursor:pointer
}
.modal-body {
    position: relative;
    padding: 15px;
}
.modal-body form {
    width: 277px;
    overflow: hidden;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif!important;
}