利用js實現遮罩彈出層登錄注冊表單



51 202 68



特效描述:利用js實現 遮罩彈出層 登錄注冊表單,利用js實現遮罩彈出層登錄注冊表單

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="static/css/ui2.css?2013032917">
<link rel="stylesheet" type="text/css" href="static/css/ui2.css?2013032917">

2. 引入JS

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="static/js/landing-min.js?2013032917"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="static/js/landing-min.js?2013032917"></script>

3. HTML代碼

?<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->  <!---->
</head>
<body class="land-bg">
 <a role="button" style="color:#fff; background:#000000; display:block; width:100px; margin:20px auto; font-size:16px; font-weight:bold; letter-spacing:3px; height:35px; line-height:35px; text-align:center;" data-category="UserAccount" data-action="login" data-toggle="modal" href="#login-modal">登錄</a>
 <a role="button" style="color:#fff; background:#CC00FF; display:block; width:100px; margin:20px auto; font-size:16px; font-weight:bold; letter-spacing:3px; height:35px; line-height:35px; text-align:center;" data-category="UserAccount" data-action="login" data-toggle="modal" href="#signup-modal">注冊</a>
  <a role="button" style="color:#fff; background:#66CC33; display:block; width:100px; margin:20px auto; font-size:16px; font-weight:bold; letter-spacing:3px; height:35px; line-height:35px; text-align:center;" data-category="UserAccount" data-action="login" data-toggle="modal" href="#forgetform">找回密碼</a>
      <div class="modal in" id="login-modal" }> <a class="close" data-dismiss="modal">×</a>
        <h1>登錄</h1>
        <ul class="login-bind-tp">
          <li class="qweibo"> <a href="http://51qianduan.com"><em>&nbsp;</em> QQ登錄</a> </li>
          <li class="sina"> <a href="http://51qianduan.com"><em>&nbsp;</em> 微博登錄</a> </li>
          <li class="douban"> <a href="http://51qianduan.com"><em>&nbsp;</em> 豆瓣登錄</a> </li>
        </ul>
        <p>或者使用已有帳號登陸:</p>
        <form class="login-form clearfix" method="post" action="http://51qianduan.com">
          <div class="form-arrow"></div>
          <input name="email" type="text" placeholder="郵箱:">
          <input name="password" type="password" placeholder="密碼:">
          <input type="submit" name="type" class="button-blue login" value="登錄">
          <input type="hidden" name="return-url" value="">
          <div class="clearfix"></div>
          <label class="remember">
          <input name="remember" type="checkbox" checked/>
          下次自動登錄 </label>
          <a class="forgot">忘記密碼?</a>
          <ul class="third-parties">
            <li>
              <p data-url="">新浪微博帳號</p>
            </li>
            <li>
              <p data-url="">騰訊微博帳號</p>
            </li>
            <li>
              <p data-url="">豆瓣帳號</p>
            </li>
            <li>
              <p data-url=""></p>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="modal in" id="signup-modal" > <a class="close" data-dismiss="modal">×</a>
  <h1>注冊</h1>
  <ul class="login-bind-tp">
    <li class="qweibo"> <a href="http://51qianduan.com"><em>&nbsp;</em> QQ登錄</a> </li>
    <li class="sina"> <a href="http://51qianduan.com"><em>&nbsp;</em> 微博登錄</a> </li>
    <li class="douban"> <a href="http://51qianduan.com"><em>&nbsp;</em> 豆瓣登錄</a> </li>
  </ul>
  <p>或者使用郵箱注冊:</p>
  <form class="signup-form clearfix" method="post" action="http://51qianduan.com">
    <p class="error"></p>
    <input name="email" type="text" placeholder="郵箱:">
    <input name="password" type="password" placeholder="密碼:">
    <input name="password1" type="password" placeholder="確認密碼:">
    <input name="username" type="text" placeholder="用戶名:">
    <input type="hidden" name="title" value="">
    <input type="hidden" name="url" value="">
    <div class="clearfix"></div>
    <input type="button" name="type" class="button-blue reg" value="注冊" data-category="UserAccount" data-action="regist">
    <ul class="third-parties">
      <li>
        <p data-url="">新浪微博帳號</p>
      </li>
      <li>
        <p data-url="">騰訊微博帳號</p>
      </li>
      <li>
        <p data-url="">豆瓣帳號</p>
      </li>
      <li>
        <p data-url=""></p>
      </li>
    </ul>
  </form>
</div>
<div class="modal in" id="forgetform"> <a class="close" data-dismiss="modal">×</a>
  <h1>忘記密碼</h1>
  <form class="forgot-form" method="post" action="http://51qianduan.com">
    <input name="email" value="" placeholder="注冊郵箱:">
    <div class="clearfix"></div>
    <input type="submit" name="type" class="forgot button-blue" value="發送重設密碼郵件">
  </form>
</div>
<div class="modal in" id="activation-modal" style="display:none"}> <a class="close" data-dismiss="modal">×</a>
  <h1>設置用戶信息</h1>
  <form class="signup-form clearfix" method="post" action="http://51qianduan.com">
    <input autocomplete=off name="username" value="" placeholder="用戶名:">
    <input autocomplete=off name="password" type="password" placeholder="密碼:">
    <input autocomplete=off name="password2" type="password" placeholder="確認密碼:">
    <input type="submit" name="type" class="button-blue reg" value="確認并登錄" data-category="UserAccount" data-action="regist">
    <div class="clearfix"></div>
  </form>
</div>
<div class="modal in" id="setpassword-modal" style="display:none"}> <a class="close" data-dismiss="modal">×</a>
  <h1>重置密碼</h1>
  <form class="signup-form clearfix" method="post" action="http://51qianduan.com">
    <input name="email" value="">
    <input name="password" type="password" placeholder="密碼:">
    <input name="password2" type="password" placeholder="確認密碼:">
    <input name="token" type="hidden" value="">
    <input type="submit" name="type" class="button-blue reg" value="設置新密碼并登錄" data-category="UserAccount" data-action="reset">
    <div class="clearfix"></div>
  </form>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子