?
jQuery彈出層登錄和全屏注冊(cè)表單,這是一款很漂亮的jQuery登錄和注冊(cè)表單,點(diǎn)擊登錄時(shí)彈出一個(gè)登錄窗口并伴隨動(dòng)畫效果,注冊(cè)頁面則是全屏顯示,非常時(shí)尚的jQuery表單。
?
代碼:
<!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="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=0.95, user-scalable=no" />
<title>jQuery彈出層登錄和全屏注冊(cè)表單在線演示</title>
<link rel="stylesheet" type="text/css" href="template/ue-content/templates/images/ue_grid.css" />
<link rel="stylesheet" type="text/css" href="template/ue-content/templates/images/style.css" />
<link rel="stylesheet" type="text/css" href="template/ue-content/templates/css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="script/jquery.easing.min.js"></script>
<script language="javascript" src="script/custom.js"></script>
</head>
<body style="padding-top:90px">
<div id="header">
<div class="common">
<div class="login fr">
<div class="loginmenu"><a title="登錄或注冊(cè)"></a></div>
<ul>
<li class="openlogin"><a href="#" onclick="return false;">登錄</a></li>
<li class="reg"><a href="#" onclick="return false;">注冊(cè)</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<div class="loginmask"></div>
<div id="loginalert">
<div class="pd20 loginpd">
<h3><i class="closealert fr"></i>
<div class="clear"></div>
</h3>
<div class="loginwrap">
<div class="loginh">
<div class="fl">會(huì)員登錄</div>
<div class="fr">還沒有賬號(hào)<a id="sigup_now" href="#" onclick="return false;">立即注冊(cè)</a></div>
<div class="clear"></div>
</div>
<h3><span>郵箱登錄</span><span class="login_warning">用戶名或密碼錯(cuò)誤</span>
<div class="clear"></div>
</h3>
<div class="clear"></div>
<form action="" method="post" id="login_form">
<div class="logininput">
<input type="text" name="username" class="loginusername" value="郵箱/用戶名" />
<input type="text" class="loginuserpasswordt" value="密碼" />
<input type="password" name="password" class="loginuserpasswordp" style="display:none" />
</div>
<div class="loginbtn">
<div class="loginsubmit fl">
<input type="submit" value="登錄" />
<div class="loginsubmiting">
<div class="loginsubmiting_inner"></div>
</div>
</div>
<div class="logcheckbox fl">
<input id="bcdl" type="checkbox" checked="true" />
保持登錄</div>
<div class="fr"><a href="#">忘記密碼?</a></div>
<div class="clear"></div>
</div>
</form>
</div>
</div>
<div class="thirdlogin">
<div class="pd50">
<h4>用第三方帳號(hào)直接登錄</h4>
<ul>
<li id="sinal"><a href="#">微博賬號(hào)登錄</a></li>
<li id="qql"><a href="#">QQ賬號(hào)登錄</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div id="reg_setp">
<div class="back_setp">返回</div>
<div class="blogo"></div>
<div id="setp_quicklogin">
<h3>您可以選擇以下第三方帳號(hào)直接登錄站長素材,一分鐘完成注冊(cè)</h3>
<ul class="quicklogin_socical">
<li class="quicklogin_socical_weibo"><a href="#">微博帳號(hào)注冊(cè)</a></li>
<li class="quicklogin_socical_qq"><a href="#">QQ帳號(hào)注冊(cè)</a></li>
</ul>
</div>
</div>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_336x280.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div style="text-align:center;clear:both">
<p>適用瀏覽器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>
?來源: http://js.itivy.com/jiaoben1716/index.html
?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元

