• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > 怎样通过jQuery实现弹窗注册对话框?

    怎样通过jQuery实现弹窗注册对话框?

    作者: 分类:JS应用 点击: 2,882 次
    wordpress CMS主题:ssmay主题

      在开发wordpress主题时,有的用户可能会需要在前台添加一个注册对话框功能,就是在前台页面的顶端添加一个注册按钮,点击这个注册按钮就可以弹出一个注册对话框。其实,这个功能,在许多的jQuery插件中已经兼顾,如著明的jQuery UI,它不仅有对话框功能,还有好多其它的功能。但是最近几个版本对IE7和IE8都有兼容性问题,而国内的IE7和IE8浏览器还有人在使用,所以,这里不做推荐。本文以另外一个兼容性好的小插件EasyDrag来实现注册对话框的功能。这个插件非常小只有5k左右,相对于臃肿的jQuery UI(256k),这款小插件非常可取。

      怎样通过jQuery实现弹窗注册对话框?

      1、html 代码

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8" />
      <title>测试</title>
      <script type="text/javascript" src="js/jquery-1.10.1.js" ></script>
      <script type="text/javascript" src="js/jquery.easydrag.handler.beta2.js"></script>
      <link type="text/css" rel="stylesheet" href="style.css">
      </head>

      <body>
      <div id="header">
      <div class="header_main">
      <h1>知问</h1>
      <div class="header_search">
      <input type="text" name="search" class="search"/>
      </div>
      <div class="header_button">
      <button id="search_button" />查询</button>
      </div>
      <div class="header_member">
      <a href="javascript:void(0);" id="reg_a">注册</a> |
      <a href="javascript:void(0);" id="login_a">登录</a>
      </div>
      </div>
      </div>

      <form id="reg">
      <h1><span><a href="javascript:void(0)" class="reg_close">关闭</a></span>这是标题</h1>
      <ol class="reg_error"></ol>
      <p>
      <label for="user">帐号:</label>
      <input type="text" name="user" class="text" id="user"/>
      <span class="star">*</span>
      </p>
      <p>
      <label for="pass">密码:</label>
      <input type="password" name="pass" class="text" id="pass" />
      <span class="star">*</span>
      </p>
      <p>
      <label for="email">邮箱:</label>
      <input type="text" name="email" class="text" id="email" />
      <span class="star">*</span>
      </p>
      <p>
      <label>性别:</label>
      <input type="radio" name="sex" value="male" id="male" checked="checked"><label for="male">男</label></input>
      <input type="radio" name="sex" value="female" id="female"><label for="female">女</label></input>
      </p>
      <p>
      <label for="date">生日:</label>
      <input type="text" name="birthday" readonly class="text" id="date" />
      </p>
      </form></body>
      </html>

      2、jQuery代码。在</head>前面添加以下代码:

      <script type="text/javascript">
      $(function(){
      $("#reg_a").click(function(){
      $("#reg").show();
      });
      $(".reg_close").click(function(){
      $("#reg").hide();
      });
      $('#reg').easydrag();
      });
      </script>

      3、CSS样式代码:

      body {margin:40px 0 0 0; padding:0; font-size:12px; font-family:宋体;background:#fff;}
      #header {width:100%; height:40px;background:url(../img/header_bg.png);position:absolute; top:0;}
      #header .header_main {width:800px;height:40px;margin:0 auto;}
      #header .header_main h1 { font-size:20px; margin:0;padding:0; color:#666; height:40px;line-height:40px;padding:0 10px;float:left;}
      #header .header_search { padding:6px 0 0 0;float:left;}
      #header .header_search .search {width:300px;height:24px; border:1px solid #ccc; background:#fff;color:#666; font-size:14px; text-indent:5px;}
      #header .header_button { padding:5px;float:left;}
      #header .header_member { float:right;height:40px;line-height:40px;color:#555;font-size:14px;}
      #header .header_member a {text-decoration:none;color:#555;font-size:14px;}

      #reg ,#login{padding:0px; width:300px; display:none; position:absolute; top:30%; left:40%; border:1px solid #ccc;}
      #reg h1,#login h1 { height:30px; line-height:30px; color:#fff; font-size:14px; background:#87b0e1; padding-left:10px; margin-top:-0px;}
      #reg h1 span,#login h1 sapn{float:right; margin-right:5px;}
      #reg p ,#login p{margin:10px 0;padding-left:10px;}
      #reg p label ,#login p label{font-size:14px;color:#666;}
      #reg p .star ,#login p .star{color:red;}
      #reg .star ,#login .star { font-size:14px; color:maroon;}
      #reg .succ ,#login .succ{ display:inline-block; width:28px; background:url(/jq/img/reg_succ.png) no-repeat;}
      #reg ol ,#login ol{ margin:0;padding:0 0 0 20px;color:maroon;}
      #reg ol li ,#login ol li{height:20px;}
      #reg .text ,#login .text{border-radius:4px;border:1px solid #ccc;background:#fff;height:25px;width:200px;text-indent:5px;color:#666;}

      通过以上代码,我们只要点击上图中的顶部的注册按钮,就可以弹出注册对话框(如下图)。

      怎样通过jQuery实现弹窗注册对话框?



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201510084851.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.