Home>

Tip:If the browser does not work properly,Try switching the browsing mode.

Jquery made special effects source code with mask pop-up layer for login and registration formsis a piece of code that pops up the page i want to use on the original page after clicking.

The js code for everyone to share with the popup layer to implement the login registration form code special effects code is as follows

<! 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>js make a popup layer with a mask to implement the login registration form code special effect</title>
<link rel="stylesheet" type="text/css" href="css/198zone.css">
</head>
<body>
<a data-toggle="modal" href="#login-modal">login</a>
<a data-toggle="modal" href="#signup-modal">Registration</a>
<a data-toggle="modal" href="#forgetform">Retrieve Password</a>
<a data-toggle="modal" href="#activation-modal">User Information</a>
<a data-toggle="modal" href="#setpassword-modal">Reset password</a>
<div>
 <a data-dismiss="modal">×</a>
 <h1>login</h1>
 <ul>
 </ul>
 <p>Or log in with an existing account:</p>
 <div></div>
 <input name="email" type="text" placeholder="mailbox:">
 <input name="password" type="password" placeholder="password:">
 <input type="submit" name="type" value="login">
 <input type="hidden" name="return-url" value="">
 <div></div>
 <label><input name="remember" type="checkbox" checked />Automatic login next time</label>
 <a>Forgot your password?</a>
 <ul>
 <li><p>Sina Weibo account</p></li>
 <li><p>Tencent Weibo account</p></li>
 <li><p>Douban account</p></li>
 <li><p></p></li>
 </ul>
 </form>
</div>
<div>
 <a data-dismiss="modal">×</a>
 <h1>Registration</h1>
 <ul>
 </ul>
 <p>Or use email registration:</p>
 <p></p>
 <input name="email" type="text" placeholder="mailbox:">
 <input name="password" type="password" placeholder="password:">
 <input name="password1" type="password" placeholder="Confirm password:">
 <input name="username" type="text" placeholder="username:">
 <input type="hidden" name="title" value="">
 <input type="hidden" name="url" value="">
 <div></div>
 <input type="button" name="type" value="register" data-action="regist">
 <ul>
 <li><p>Sina Weibo account</p></li>
 <li><p>Tencent Weibo account</p></li>
 <li><p>Douban account</p></li>
 </ul>
 </form>
</div>
<div>
 <a data-dismiss="modal">×</a>
 <h1>Forgot Password</h1>
 <input name="email" value="" placeholder="registered mailbox:">
 <div></div>
 <input type="submit" name="type" value="send reset password message">
 </form>
</div>
<div>
 <a data-dismiss="modal">×</a>
 <h1>Set user information</h1>
 <input autocomplete=off name="username" value="" placeholder="username:">
 <input autocomplete=off name="password" type="password" placeholder="password:">
 <input autocomplete=off name="password2" type="password" placeholder="Confirm password:">
 <input type="submit" name="type" value="confirm and log in" data-action="regist">
 <div></div>
 </form>
</div>
<div>
 <a data-dismiss="modal">×</a>
 <h1>Reset password</h1>
 <input name="email" value="">
 <input name="password" type="password" placeholder="password:">
 <input name="password2" type="password" placeholder="Confirm password:">
 <input name="token" type="hidden" value="">
 <input type="submit" name="type" value="set new password and log in" data-action="reset">
 <div></div>
 </form>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/modal.js"></script>
<script type="text/javascript">
$(document) .ready (function () {
 $("a.forgot"). click (function () {
 $("#login-modal"). modal ("hide");
 $("#forgetform"). modal ({show:! 0})
 });
 $("#signup-modal"). modal ("hide");
 $("#forgetform"). modal ("hide");
 $("#login-modal"). modal ("hide");
 $("#activation-modal"). modal ("hide");
 $("#setpassword-modal"). modal ("hide");
});
</script>
</body>
</html>
  • Previous The difference between MySQL execute, executeUpdate, and executeQuery
  • Next JSON usage of PHP array to JS array, how JS receives PHP array