1. Xác thực tài khoản để có thể sử dụng đầy đủ chức năng của diễn đàn. Xem hướng dẫn
    Dismiss Notice

Share code tạo Login dạng Popup ngoài Sidebar sử dụng HTML và CSS3

Thảo luận trong 'Style & Template Questions' bắt đầu bởi vbt.dongnguyen, 2/9/14.

1votes
5/5, 1 vote

  1. vbt.dongnguyen

    vbt.dongnguyen Member

    Bài viết:
    180
    Likes :
    102
    Mình mở cái topic này nhằm tránh Spam nhiều bài trong mục này, mọi thứ mình chia sẽ mình sẽ post vào đây, anh/em nào cần thì cứ vào đây lụm về sài nhé hihi, vọc vạch rồi chia sẽ thôi.

    Đầu tiên mở hàng thì mình chia sẽ cách tạo Hộp đăng nhập dạng Popup chỉ sử dụng HTML và CSS.
    Demo: http://www.zshare.vn
    Bạn click vào button Sign up Nows! nó hiện ra một bảng đăng nhập Popup là nó đó.

    Bắt đầu thêm code bạn mở template sidebar_visitor_panel thay toàn bộ bằng:
    Mã:
    <xen:if is="{$visitor.user_id}">
    
    <div class="section visitorPanel">
        <div class="secondaryContent">
       
            <xen:avatar user="$visitor" size="m" img="true" />
           
            <div class="visitorText">
                <h2>{xen:phrase signed_in_as_x_sidebar, 'name={xen:helper username, $visitor, 'NoOverlay'}'}</h2>       
                <div class="stats">
                <xen:hook name="sidebar_visitor_panel_stats">
                    <dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
                    <dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
                    <dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
                </div>
                </xen:hook>
            </div>
           
        </div>
    </div>
    
    <xen:else />
    
    <div class="section loginButton">       
        <div class="secondaryContent3">
       
    <a href="#login_form" class="SignupButton2" id="login_pop">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a>
       
        </div>
    </div>
            <!-- popup form #1 -->
            <a href="#x" class="overlay" id="login_form"></a>
            <div class="popup">
    <form action="{xen:link 'login/login'}" method="post" class="xenForm {xen:if $eAuth, 'eAuth'}" id="login">
           
                <h2>Welcome Guest!</h2>
                <p>Please enter your login and password here</p>
                <div>
                    <label for="login">{xen:phrase your_name_or_email_address}:</label>
                    <input type="text" name="login" id="LoginControl" class="textCtrl" tabindex="101" />
                </div>
                <div>
                    <label for="password">{xen:phrase password}:</label>
                    <input type="password" name="password" class="textCtrl" id="ctrl_password" tabindex="102" />
                </div>
               
                <input type="submit" class="button primary" value="{xen:phrase log_in}" tabindex="104" data-loginPhrase="{xen:phrase log_in}" data-signupPhrase="{xen:phrase sign_up}" />
    <div class="quenmatkhau">
    <a href="{xen:link lost-password}" class="OverlayTrigger OverlayCloser" tabindex="106">{xen:phrase forgot_your_password}</a>
    </div>
                <a class="close" href="#close"></a>
           
    </form>
        </div>
    </xen:if>
    
    <xen:include template="ad_sidebar_below_visitor_panel" />
    Sau đó thêm mã CSS phía dưới vào EXTRA.CSS:
    Mã:
    .panel {
        height: 34px;
        padding: 10px;
    }
    .panel a#login_pop, .panel a#join_pop {
        border: 2px solid #07839f;
        color: #fff; background-color: #0483a0;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
        background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
        background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
        background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
        background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
        background-image: linear-gradient(top, #31b2c3, #0483a0);
        display: block;
        float: right;
        margin-right: 10px;
        padding: 5px 10px;
        text-decoration: none;
        text-shadow: 1px 1px #000;
    
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }
    a#login_pop:hover, a#join_pop:hover {
        border-color: #31b2c3; background:#31b2c3;
        text-decoration: none;
    }
    a#login_pop:visited, a#join_pop:visited {
    color: #fff;
    }
    .overlay {
        background-color: rgba(0, 0, 0, 0.6);
        bottom: 0;
        cursor: default;
        left: 0;
        opacity: 0;
        position: fixed;
        right: 0;
        top: 0;
        visibility: hidden;
        z-index: 1;
    
        -webkit-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -ms-transition: opacity .5s;
        -o-transition: opacity .5s;
        transition: opacity .5s;
    }
    .overlay:target {
        visibility: visible;
        opacity: 1;
    }
    .popup h2{color:#07839f; line-height:1.8em; font-size: 16px;font-size: 24px;
    font-variant: small-caps;}
    .popup {
        background-color: #fff;
        border: 3px solid #fff;
        display: inline-block;
        left: 50%; color:#666;
        opacity: 0;
        padding: 15px;
        position: fixed;
        text-align: justify;
        top: 40%;
        visibility: hidden;
        z-index: 1000;
    
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    
        -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    
        -webkit-transition: opacity .5s, top .5s;
        -moz-transition: opacity .5s, top .5s;
        -ms-transition: opacity .5s, top .5s;
        -o-transition: opacity .5s, top .5s;
        transition: opacity .5s, top .5s;
    }
    .overlay:target+.popup {
        top: 50%;
        opacity: 1;
        visibility: visible;
    }
    .close {
        background-color: rgba(0, 0, 0, 0.8);
        height: 30px;
        line-height: 30px;
        position: absolute;
        right: 0;
        text-align: center;
        text-decoration: none;
        top: -15px;
        width: 30px;
    
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        border-radius: 15px;
    }
    .close:before {
        color: rgba(255, 255, 255, 0.9);
        content: "X";
        font-size: 24px;
        text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    }
    .close:hover {
        background-color: rgba(64, 128, 128, 0.8);
    }
    .popup p, .popup div {
        margin-bottom: 10px;
        -font-variant: small-caps;
        font-size: 14px;
    }
    .popup label {
        display: inline-block;
        text-align: left;
        width: 180px;
        -font-size: 16px;
        -font-variant: small-caps;
    }
    .popup input[type="text"], .popup input[type="password"] {
        margin: 0;
        padding: 4px; background:#d8f6fd;
    
        border: 1px solid #66c8de;
        -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
        -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
        box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }
    .popup input[type="text"]:hover, .popup input[type="password"]:hover {
        background: #fff
    }
    input[type=button]{
        cursor: pointer;
        font: bold 15px Arial, Helvetica;
        color: #fafafa;
        text-transform: uppercase;
        background-color: #0483a0;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
        background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
        background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
        background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
        background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
        background-image: linear-gradient(top, #31b2c3, #0483a0);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        padding:5px;
        text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
    }
    .SignupButton2 {
    background-color: #03AC91;
    padding: 3px;
    /* margin: 10px 30px; */
    /* border: 1px solid #f9bc6d; */
    /* -webkit-border-radius: 8px; */
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    /* border-radius: 8px; */
    text-align: center;
    line-height: 30px;
    -webkit-box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
    -khtml-box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
    box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
    display: block;
    cursor: pointer;
    height: 30px;
    font-size: 16px;
    }
    .secondaryContent3 {
    background: url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x scroll center top #FAFAFA;
    padding: 10px;
    -border: 1px solid #D1D1D1;
    -webkit-box-shadow: 0px 0px 10px -7px rgba(0,0,0,0.76);
    -moz-box-shadow: 0px 0px 10px -7px rgba(0,0,0,0.76);
    -webkit-box-shadow: 0px 0px 10px -10px rgba(0,0,0,0.76);
    -moz-box-shadow: 0px 0px 10px -10px rgba(0,0,0,0.76);
    -khtml-box-shadow: 0px 0px 10px -10px rgba(0,0,0,0.76);
    box-shadow: 0px 0px 10px -10px rgba(0,0,0,0.76);
    }
    a.secondaryContent3{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    }
    .quenmatkhau {
    color: #fff;
    text-align: right;
    }
    Chúc bạn thành cmn công =))
     
    Đang tải...
  2. Captain

    Captain New Member

    Bài viết:
    37
    Likes :
    15
    Toàn hàng nóng . Cám ơn bác nhiều ạ :-*
     
  3. AC_Khanh01

    AC_Khanh01 Member

    Bài viết:
    221
    Likes :
    61
    Lập nhiều topic đi bác ơi >:D<
    Vì sau này có nhiều người google nữa, thì họ đọc thấy tiêu đề giống cái họ cần, hoặc là vấn đề họ cần giải quyết thì click vào :D
    chứ bác dồn hết vào 1 topic thế này, sau này google sao thấy được :(
     
  4. kaizencoming

    kaizencoming Member

    Bài viết:
    637
    Likes :
    127
    ủng hộ tinh thần :)
     
comments powered by Disqus

Chia sẻ trang này

Đang tải...