jquery實現彈出層登錄全屏注冊代碼



39 154 52



特效描述:jquery實現 彈出層登錄 全屏注冊,jquery實現彈出層登錄全屏注冊代碼

代碼結構

1. 引入CSS

<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" />
<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" />

2. 引入JS

<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>
<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>

3. HTML代碼

?<!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></title>
</head>
<body style="padding-top:90px">
<div id="header">
  <div class="common"> 
    <div class="login fr">
      <div class="loginmenu"><a title="登錄或注冊"></a></div>
      <ul>
        <li class="openlogin"><a href="http://51qianduan.com/" onclick="return false;">登錄</a></li>
        <li class="reg"><a href="http://51qianduan.com/" onclick="return false;">注冊</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">會員登錄</div>
        <div class="fr">還沒有賬號<a id="sigup_now" href="http://51qianduan.com/" onclick="return false;">立即注冊</a></div>
        <div class="clear"></div>
      </div>
      <h3><span>郵箱登錄</span><span class="login_warning">用戶名或密碼錯誤</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="http://51qianduan.com/">忘記密碼?</a></div>
          <div class="clear"></div>
        </div>
      </form>
    </div>
  </div>
  <div class="thirdlogin">
    <div class="pd50">
      <h4>用第三方帳號直接登錄</h4>
      <ul>
        <li id="sinal"><a href="http://51qianduan.com/">微博賬號登錄</a></li>
        <li id="qql"><a href="http://51qianduan.com/">QQ賬號登錄</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>您可以選擇以下第三方帳號直接登錄站長素材,一分鐘完成注冊</h3>
    <ul class="quicklogin_socical">
      <li class="quicklogin_socical_weibo"><a href="http://51qianduan.com/">微博帳號注冊</a></li>
      <li class="quicklogin_socical_qq"><a href="http://51qianduan.com/">QQ帳號注冊</a></li>
    </ul>
  </div>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 提示框/彈出層 文本框 text文本框 復選框 復選按鈕 復選框美化 登錄框 注冊框 表單提交
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子