wordpress CMS主题 微信
Home > JS应用 > 怎样通过jQuery实现弹窗注册对话框?

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

高时银博客 JS应用 点击: 1,463 次 0 0
  • 标签:
  • 在开发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实现弹窗注册对话框?


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

    目前还没有评论。赶快来坐沙发吧。

    发表评论