Home>

The login registration of the official website will jump to another interface every time.Can you make a simple one,A box pops up on the interface to log in,I thought about making such a case,Let's see if it works

Paste the code,Realized the login registration function loaded on the same pop-up window! Free to click! Of course the style is ugly! Please forgive me! demo is below

1 here is the html content

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jquery mouse click popup login box code</title>
</head>
<body>
<br><br><br><br><br><br><br>
<div><a href="javascript:void (0);">Click and pop up login box</a>
 <div><a href="javascript:void (0);">Click and pop up login box</a></div>
 <div>
 <div>
 <ul>
 <Li onclick="switchtag (" _ xka "," _ xka_list ", 1,2," conxk1 "," conxk2 ");">
 User login
 </li>
 <li onclick="switchtag (" _ xka "," _ xka_list ", 2,2," conxk1 "," conxk2 ");">
 Quick registration
 </li>
 </ul><span>×</span>
 </div>
 <div>
 <div>
 <div>
 <div>
 <! ---------- login start ------>
 <div>
 <div>
 <input name="logusername" type="text" value="input user name" placeholder="input user name" />
 </div>
 <div>
 <input name="logpassword" placeholder="input password" type="password" value="" />
 </div>
 <div>
 <input type="button" onclick="ajaxlogin ()" value="login" />
 </div>
 <div></div>
 <div>
 forget password?<a href="http://www.mokaoba.com/">Retrieve Password</a><span></span>
 </div>
 </div>
 <! -------- login end --------->
 </div>
 </div>
 <div>
 <div>
 <! -------- register start --------->
 <form method="post" enctype="multipart/form-data" name="userinfoform">
 <input type="hidden" name="enews" value="register" />
 <input name="groupid" type="hidden" value="1" />
 <div>
 <ul>
  <li>username:</li>
  <li><input name="username" type="text" required="" /><span></span></li>
 </ul>
 <ul>
  <li>Password:</li>
  <li><input name="password" onblur="checkreg (" password ", this.value)" type="password" required="" /><span></span></li>
 </ul>
 <ul>
  <li>Duplicate password:</li>
  <li><input name="repassword" onblur="checkreg (" repassword ", this.value)" type="password" required="" /><span></span></li>
 </ul>
 <ul>
  <li>Real Name:</li>
  <li><input name="realname" onblur="checkreg (" realname ", this.value)" type="text" required="" /><span></span></li>
 </ul>
 <ul>
  <li>Mobile number:</li>
  <li><input name="telephone" onblur="checkreg (" telephone ", this.value)" type="text" required="" /><span></span></li>
 </ul>
 <ul>
  <li>e-mail:</li>
  <li><input name="mail" onblur="checkreg (" mail ", this.value)" type="text" required="" /><span></span></li>
 </ul>
 <ul>
  <li></li>
  <li><input type="checkbox" onclick="checkpass (" all ")" />I have read and accepted "&a href =" /http://www.jiao4.com/javascript " target="_ blank">Terms of Service</a>"</li>
 </ul>
 <div></div>
 <div>
  <input type="button" onclick="ajaxzhuce ()" name="zhuce" value="register" /><span></span>
 </div>
 <div></div>
 </div>
 </form>
 <! -------- register end --------->
 </div>
 </div>
 </div>
 </div>
 </div>
 <div></div>
</body>
</html>

2 Next is the style css

@charset "utf-8";
 /* /////* Login ///////by liangguanyu /////* /
 .js_login h1, h2, h3, h4, h5, h6, p, ul, li {
 padding:0;
 margin:0;
 list-style:none;
 }
 .login-header {
 text-align:center;
 height:30px;
 font-size:24px;
 line-height:30px;
 }
 .js_login {
 display:none;
 position:fixed;
 opacity:1;
 z-index:11000;
 left:50%;
 margin-left:-250px;
 top:100px;
 }
 .js_login a {
 color:blue;
 text-decoration:none;
 }
 .sub_btn1 {/* position:absolute;right:0px;top:50px;* /
 width:105px;
 height:35px;
 display:inline-block;
 zoom:1;/* zoom and * display=ie7 hack for display:inline-block * /
 * display:inline;
 vertical-align:baseline;
 margin:0 2px;
 outline:none;
 cursor:pointer;
 text-align:center;
 align-content:center
 font:15px/100%arial, helvetica, sans-serif;
 text-shadow:0 1px 1px rgba (0,0,0, .6);
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
 border-radius:3px;
 -webkit-box-shadow:0 1px 2px rgba (0,0,0, .2);
 -moz-box-shadow:0 1px 2px rgba (0,0,0, .2);
 box-shadow:0 1px 2px rgba (0,0,0, .2);
 color:white;/* #e8f0de * /
 border:solid 1px #538312;
 background:#64991e;/* #64991e * /
 background:-webkit-gradient (linear, left top, left bottom, from (#43cd80), to (#3cb371));/* #7db72f #4e7d0e * /
 background:-moz-linear-gradient (top, #7db72f, #4e7d0e);
 filter:progid:dximagetransform.microsoft.gradient (startcolorstr="#7db72f", endcolorstr="#4e7d0e");
 }
 .sub_btn1:hover {
 background:#538018;
 background:-webkit-gradient (linear, left top, left bottom, from (#2e8b57), to (#008b45));
 background:-moz-linear-gradient (top, #6b9d28, #436b0c);
 filter:progid:dximagetransform.microsoft.gradient (startcolorstr="#6b9d28", endcolorstr="#436b0c");
 }
 .inputbg {
 height:40px;
 width:280px;
 margin:0 auto;
 margin-top:20px;
 border-radius:4px;
 border:1px solid #eee;
 text-align:left;
 color:#333;
 }
 #username * {
 vertical-align:middle;
 }
 .inputsub {
 outline:0;
 font-family:tahoma, geneva, sans-serif;
 font-size:14px;
 width:270px;
 float:left;
 border:none;
 text-align:left;
 color:#333;
 margin:10px 0 3px 8px;
 background:none;
 overflow:hidden;
 }
 .buttons {
 width:280px;
 margin:0 auto;
 margin-top:25px;
 text-align:left;
 }
 #login-submokaoba {
 width:105px;
 height:35px;
 }
 #qql {
 float:right;
 }
 .reg {
 padding:20px;
 margin:0 auto;
 width:280px;
 }
 #login {
 margin-top:20px;
 }
 .hidden {
 display:none;
 }
 .js_login {
 position:absolute;
 width:500px;
 background:#fff;
 display:none;
 color:#999;
 }
 .js_login .js_title {
 overflow:hidden;
 height:42px;
 background:#f9f9f9 url (http://www.jiao4.com/java) repeat-x;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 }
 .js_login .js_title span {
 float:right;
 line-height:40px;
 padding:0 9px;
 cursor:pointer;
 font-family:"";
 font-size:30px;
 }
 .js_login .js_title span:hover {
 color:#555;
 }
 .js_login .js_title li {
 float:left;
 width:130px;
 text-align:center;
 font-family:"Microsoft Yahei";
 font-size:18px;
 cursor:pointer;
 height:43px;
 }
 .js_login .js_title li a {
 float:left;
 width:130px;
 text-align:center;
 }
 .js_login .js_title li a:hover {
 }
 .conxk1 {
 border-top:3px solid #15b300;
 border-right:1px solid #dfdfdf;
 background:#fff;
 height:39px;
 line-height:39px;
 color:#11b200;
 }
 .conxk1 a {
 color:#11b200;
 }
 .conxk1 a:hover {
 color:#11b200;
 text-decoration:none;
 }
 .conxk2 {
 border-right:1px solid #dfdfdf;
 height:39px;
 line-height:39px;
 padding-top:3px;
 color:#646464;
 }
 .conxk2 a {
 color:#646464;
 }
 .conxk2 a:hover {
 color:#646464;
 text-decoration:none;
 }
 .js_login .js_content {
 overflow:hidden;
 padding:13px 15px;
 background:#fff;
 border:1px solid #ccc;
 border-top-width:0px;
 }
 .js_login .js_content .de_list {
 width:100%;
 padding-top:12px;
 }
 .js_login .js_content a:visited {
 color:blue;
 }
 .js_login .js_content a:hover {
 color:red;
 text-decoration:underline;
 }
 .reg-input {
 display:block;
 clear:both;
 padding:5px 0;
 }
 .reg-input li {
 display:inline;
 float:left;
 }
 .reg-input .input-text {
 width:220px;
 height:25px;
 border:1px solid #ccc;
 outline:none;
 border-radius:2px;
 }
 .input-text:focus {
 border:1px solid #339933;
 }
 .reg-input .reg-text {
 width:100px;
 text-align:right;
 font-size:14px;
 }
 .reg-input .input_text {
 width:70px;
 float:left;
 }
 .js_login #checkbox {
 text-align:left;
 }
 .js_login #errmsg {
 color:red;
 }
 .js_login .sub_btn1 {
 font-size:20px;
 }
 #lean_overlay {
 position:fixed;
 z-index:100;
 top:0px;
 left:0px;
 height:100%;
 width:100%;
 background:#000;
 display:none;
 }

More on js later, remember to add jquery! The code in the red area is responsible for the event of logging in and clicking on the switch.Add the yellow code to the code click method to load it into the current interface after clicking!

<script type="text/javascript">
 $(function () {
 h_login=();
 h_login.openlogin=function () {
 $(". login-header a"). click (function () {
 switchtag ("_ xka", "_xka_list", 1, 2, "conxk1", "conxk2");
 $(". js_login"). show ();
 $(". login-bg"). show ();
 });
 $(". login-header1 a"). click (function () {
 switchtag ("_ xka", "_xka_list", 2, 2, "conxk1", "conxk2");
 $(". js_login"). show ();
 $(". login-bg"). show ();
 });
 };
 h_login.closelogin=function () {
 $(". close-login"). click (function () {
 $(". js_login"). hide ();
 $(". login-bg"). hide ();
 });
 };
 h_login.loginform=function () {
 };
 h_login.run=function () {
 this.closelogin ();
 this.openlogin ();
 this.loginform ();
 };
 h_login.run ();
 });
 function switchtag (tag, content, k, n, stylea, styleb) {
 for (i=1;i<= n;i ++) {
 if (i == k) {
 document.getelementbyid (tag + i) .classname=stylea;
 document.getelementbyid (content + i) .classname="showbox"
 } else {
 document.getelementbyid (tag + i) .classname=styleb;
 document.getelementbyid (content + i) .classname="hidden"
 }
 }
 };
 function ajaxlogin () {
 var username=$("#logusername");
 var usernamevalue=$("#logusername"). val ();
 var password=$("#logpassword");
 var passwordvalue=$("#logpassword"). val ();
 alert (usernamevalue + passwordvalue);
. Window.location.reload ();
 }
 function ajaxzhuce () {
 var usernamevalue=$("#username"). val ();
 var passwordvalue=$("#password"). val ();
 var realnamevalue=$("#realname"). val ();
 var telephonevalue=$("#telephone"). val ();
 var emailvalue=$("#mail"). val ();
 alert (usernamevalue + passwordvalue + realnamevalue + telephonevalue + emailvalue);
. Window.location.reload ();
 }
</script>

Effect picture:

  • Previous Fifty-sixth of Manipulating Data in ASPNET 20: Using ObjectDataSource to Cache Data
  • Next Summary of JavaScript string methods