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

vbt.dongnguyen · 2/9/14

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 =))

Captain · 2/9/14

Toàn hàng nóng . Cám ơn bác nhiều ạ

AC_Khanh01 · 2/9/14

Lập nhiều topic đi bác ơi
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
chứ bác dồn hết vào 1 topic thế này, sau này google sao thấy được

kaizencoming · 2/9/14

ủng hộ tinh thần

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

vbt.dongnguyen Member

Captain New Member

AC_Khanh01 Member

kaizencoming Member

Chia sẻ trang này

Text Links

Textlink

Thông báo mới nhất