jquery实现弹出层登录全屏注册代码



38 148 50



特效描述: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

加群请备注:从官网了解到