[Code] Bảng đăng nhập đóng mở có nút đăng ký cho Forumotion.

  • Móm Đặc Biệt

    Demo ảnh:





    Cách làm:

    Bước 1:
    Cho cái này vào CSS
    Code:
    #contactFormContainer {
    position: absolute;
    z-index: 999;
    }
    #contactForm {
    background: url("http://diendan.mutruyenky.net/images/styles/gianglong/contactform/images/bgform.gif") repeat-y scroll left center white;
    border: 1px solid #F1F1F1;
    color: #444;
    display: none;
    height: 189px;
    padding: 7px 12px;
    width: 558px;
    }
    .bar {
    background: url("http://diendan.mutruyenky.net/images/styles/gianglong/contactform/images/ajax-loader.gif") no-repeat scroll center center transparent;
    display: none;
    height: 40px;
    margin-top: 100px;
    width: 230px;
    }
    #contactForm input {
    color: #444;
    font-size: 20px;
    margin: 4px 0;
    padding: 5px;
    }
    .textbox, textarea, select {
    font: normal 11px Tahoma,Calibri,Verdana,Geneva,sans-serif;
    color: black;
    background: white none;
    border: 1px solid #6B91AB;
    padding: 4px;
    outline: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    label {
    cursor: default;
    }
    .cb_cookieuser_navbar {
    position: relative;
    top: 2px;
    }
    #contactForm .submit {
    background: -moz-linear-gradient(center top ,white,#F6F6F6 50%,#F0F0F0 50%,white) repeat scroll 0 0 transparent;
    border: 1px solid #BBB;
    box-shadow: 1px 1px white inset,-1px -1px white inset;
    cursor: pointer;
    font-size: 20px;
    height: 45px;
    padding: 5px;
    text-shadow: 0 1px white;
    width: 277px;
    }
    #contactFormContainer .contact {
    background: url("http://diendan.mutruyenky.net/images/styles/gianglong/contactform/images/contact_me.png") repeat scroll 0 0 transparent;
    bottom: -44px;
    cursor: pointer;
    height: 47px;
    left: 0;
    position: absolute;
    width: 305px;
    }
    .dangkibut a:link,.dangkibut a:visited{background:url("http://diendan.mutruyenky.net/images/styles/gianglong/contactform/images/dangki.gif") no-repeat scroll center top orange;color:transparent;display:block;height:46px;width:236px}.dangkibut a:hover,.dangkibut a:active{background:url("http://diendan.mutruyenky.net/images/styles/gianglong/contactform/images/dangki.gif") no-repeat scroll center bottom blue}
    .morelinks {
    border-top: 1px dotted #CCC;
    list-style: circle outside none;
    margin-top: 10px;
    padding-left: 15px;
    padding-top: 7px;
    }
    .morelinks li {
    list-style: circle outside none;
    }
    #backgroundPopup {
    background: none repeat scroll 0 0 black;
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 11;
    }

    Bước 2:
    Tạo 1 Javascript mới

    Title * : Đăng nhập đóng mở
    Placement : In all the pages
    Javascript Code * :
    Code:
    $(document).ready(function(){
       //function for contact form dropdown
       function contact() {
          if ($("#contactForm").is(":hidden")){
             $("#contactForm").slideDown("slow");
             $("#backgroundPopup").css({"opacity": "0.7"});
             $("#backgroundPopup").fadeIn("slow");
          }
          else{
             $("#contactForm").slideUp("slow");
             $("#backgroundPopup").fadeOut("slow");  
          }
       }
        
       //run contact form when any contact link is clicked
       $(".contact").click(function(){contact()});
      
       //animation for same page links #
       $('a[href*=#]').each(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
          && location.hostname == this.hostname
          && this.hash.replace(/#/,'') ) {
            var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
            var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
             if ($(this.hash).length) {
                $(this).click(function(event) {
                   var targetOffset = $(this.hash).offset().top;
                   var target = this.hash;
                   event.preventDefault();          
                   $('html, body').animate({scrollTop: targetOffset}, 500);
                   return false;
                });
             }
          }
       });



      //submission scripts
      $('.contactForm').submit( function(){
          //statements to validate the form  
          var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
          var email = document.getElementById('e-mail');
          if (!filter.test(email.value)) {
             $('.email-missing').show();
          } else {$('.email-missing').hide();}
          if (document.cform.name.value == "") {
             $('.name-missing').show();
          } else {$('.name-missing').hide();}  
          if (document.cform.message.value == "") {
             $('.message-missing').show();
          } else {$('.message-missing').hide();}      
          if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){
             return false;
          }
          
          if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
             //hide the form
             $('.contactForm').hide();
          
             //show the loading bar
             $('.loader').append($('.bar'));
             $('.bar').css({display:'block'});
          
             //send the ajax request
             $.post('mail.php',{name:$('#name').val(),
                           email:$('#e-mail').val(),
                           message:$('#message').val()},
          
             //return the data
             function(data){
               //hide the graphic
               $('.bar').css({display:'none'});
               $('.loader').append(data);
             });
            
             //waits 2000, then closes the form and fades out
             setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000);
            
             //stay on the page
             return false;
          }
      });
       //only need force for IE6  
       $("#backgroundPopup").css({  
          "height": document.documentElement.clientHeight
       });  
    });

    Bước 3:
    Vào Overall_header tìm code sau:
    Code:
    <a id="top" name="top" accesskey="t"></a>

    Và chèn code này vào dưới nó
    Code:
    <!-- BEGIN switch_user_logged_out -->
      <div id="contactFormContainer">

            <div id="contactForm" style="display: none; ">
               <div class="loader"></div>
             <div class="bar"></div>

                <div style="float:left;">

                <form id="navbar_loginform" class="contactForm" action="/login.forum" method="post" name="form_login">
                <table>
                <tbody><tr><td>
                                      
                                        <input placeholder="Tên đăng nhập"  type="text" size="20" name="username">

                                          </td></tr>
                <tr><td>
                                        <input placeholder="Mật khẩu" type="password" size="20" name="password">

                                        </td></tr>
                <tr><td style="color:#ffffff;"><label for="cb_cookieuser_navbar">
                                      
                                      <input checked="" type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103"> Ghi nhớ?</label></td></tr>
                <tr><td>
                                      
                                      <input type="submit"name="login" value="Đăng nhập" style="" class="submit"></td></tr>
                </tbody></table>
                
                </form>      
                        
                </div>
                <div style="float:left; margin-left:35px; width:236px;">
                   <p style="font-size:14px; font-weight:bold; margin-bottom:10px;"> Nếu chưa có tài khoản, xin vui lòng ĐĂNG KÝ bằng cách nhấn nút dưới đây.</p>
                                      <div class="dangkibut"><a href="/register" rel="nofollow">Dang ki</a></div>
                   <ul class="morelinks">
                                              <li><a href="/profile?mode=sendpassword">Quên mật khẩu?</a></li>
                                              <li><a href="/faq">Trợ giúp</a></li>
                   </ul>
                   <div class="contact" style="height:31px; width:28px;background:url(http://diendan.mutruyenky.net/images/icons/icon_close.png); position:relative; left:240px; bottom:-35px; cursor:pointer;"></div>
                </div>

            
          </div>

          <div class="contact"></div>  

                                      
                                      
      </div>
                                      <div id="backgroundPopup" style="height: 673px; display: none; opacity: 0.7; "></div>
          <!-- END switch_user_logged_out -->  
                                    

    Thế là xong (thoát Admin ra xem nào)
    #codefm

    Tags: #code

Thông tin tác giả
avatar
S-MOD
Bài viết :
287
Points :
594
Like :
157
Punbb
An toàn
Status :
Đành vậy thế thôi
Xem lý lịch thành viên http://vnraovat.forumvi.com/
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