[Codes] Form đăng nhập đóng mở [ Khá Hot và Đẹp ]

Demo ảnh :


Demo Online :

Code:

http://testmutruyenky.forumvi.com/

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 : vào MODULES >>    HTML & JAVASCRIPT >> Javascript codes managementAdd : Enable Javascript code management :
Đánh dấu có nhá

Tiếp theo
Javascript Code : tạo 1 Scripts mới

Title * : Đăng nhập đóng mở
Placement : đánh dấu : 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 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 -->  
                                  

Nguồn : Sưu tầm

Thế là xong ( thoát Admin ra xem )

đẹp đấy, thank kiu nha! Vote...bùm~~~