欢迎光临!中国网页设计提供最新的免费网页制作教程,网页设计技术,HTML5+DIV3...中国站长必上的网站。
加入收藏设为首页广告合作
您当前位置:网站首页 >> 网页特效 >> 页面特效 >> jquery实现点击弹出登陆窗口
  • 文本特效
  • 鼠标特效
  • 页面特效
  • 导航菜单
  • 图形特效
  • 其它特效
  • jquery实现点击弹出登陆窗口

    来源:中国网页设计 浏览:452

    内容提要:很多网站会员系统的用户登录及注册页面都是通过弹出窗口的形式,这样实现的好处,不用重新向服务端发送新请求,用户体验更好。

    jquery实现点击弹出登陆窗口

    很多网站会员系统的用户登录及注册页面都是通过弹出窗口的形式,如上图手机521 http://www.mobile521.com/ 网站的用户登录页面。这样实现的好处,不用重新向服务端发送新请求,用户体验更好。

    今天中国网页设计教给大家如何利用jquery实现点击弹出登录窗口。非常简单实用,大家美化下CSS就可以直接使用了。

    jquery实现点击弹出登陆窗口

    页面代码:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery点击弹出登陆窗口</title>
    <link rel="stylesheet" href="css/xin126.css" media="all">
    <script src="js/jquery.min.js"></script>
    <script>
    jQuery(document).ready(function($) {
     $('.theme-login').click(function(){
      $('.theme-popover-mask').fadeIn(100);
      $('.theme-popover').slideDown(200);
     })
     $('.theme-poptit .close').click(function(){
      $('.theme-popover-mask').fadeOut(100);
      $('.theme-popover').slideUp(200);
     })

    })
    </script>
    </head>
    <body>
    <div class="theme-buy">
    <a class="btn btn-primary btn-large theme-login" href="javascript:;">点击查看效果</a>
    </div>
    <div class="theme-popover">
         <div class="theme-poptit">
              <a href="javascript:;" title="关闭" class="close">×</a>
              <h3>登录 是一种态度</h3>
         </div>
         <div class="theme-popbod dform">
               <form class="theme-signin" name="loginform" action="" method="post">
                    <ol>
                         <li><h4>你必须先登录!</h4></li>
                         <li><strong>用户名:</strong><input class="ipt" type="text" name="log" value="www.xin126.cn" size="20" /></li>
                         <li><strong>密码:</strong><input class="ipt" type="password" name="pwd" value="***" size="20" /></li>
                         <li><input class="btn btn-primary" type="submit" name="submit" value=" 登 录 " /></li>
                    </ol>
               </form>
         </div>
    </div>
    <div class="theme-popover-mask"></div>
    </body>
    </html>

    源文件下载:jquery点击弹出登陆窗口.zip

    发表评论 共有0人对本文发表评论
    网名:
    评论:
    验证:
    (网友评论仅供表达个人看法,并不表明本站同意其观点或证实其描述)
    联系我们 - 网站调查 - 免责声明 - 站长简介 - 站点综合查询 - 课件习题 - 友情链接 - 站长统计