jquery弹出层登录和全屏注册页面效果

jquery弹出层登录和全屏注册页面效果

 详细介绍

使用方法:
载入CSS样式、jQuery库文件、插件JS文件

<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://libs.baidu.com/jquery/1.7.2/jquery.min.js">script>
<script language="javascript" src="script/jquery.easing.min.js">script>
<script language="javascript" src="script/custom.js">script>

HTML部分(导航样式、弹出层)

<div id="header">
  <div class="common"> 
    <div class="login fr">
      <div class="loginmenu"><a title="登录或注册">a>div>
      <ul>
        <li class="openlogin"><a href="http://www.sucainiu.com/" onclick="return false;">登录a>li>
        <li class="reg"><a href="http://www.sucainiu.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://www.sucainiu.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://www.sucainiu.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://www.sucainiu.com/">微博账号登录a>li>
        <li id="qql"><a href="http://www.sucainiu.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://www.sucainiu.com/">微博帐号注册a>li>
      <li class="quicklogin_socical_qq"><a href="http://www.sucainiu.com/">QQ帐号注册a>li>
    ul>
  div>
div>
微信公众号:凌色彩
关注我们,获取更多的全网素材资源,有趣有料!
12000人已关注
分享到:
赞(0)

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

jQuery插件库-收集最全最新最好的jQuery插件!

凌色彩