[Code] Code popup login style ForumUS

  • Giựt
    1. [Code] Code popup login style ForumUS
    avatar MOD

    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;
    }

Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết