四,jQuery弹出式注册框实现
发布在jQuery基础2014年4月17日view:6750
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

前面jquery的一些基本的东西说的差不多了,以后大多都是大家比较感兴趣的模块。

废话不多说,今天三戒给大家share的是:jQuery弹出式注册框的实现!弱弱说一句,只要注册框会做了,几乎都通了。

Well,首先技术关键:弹出层的实现、密码强度判断、验证表单内容是否符合要求、Ajax提交。

1.弹出层的实现

弹出层的实现方法用很多种,我介绍两种:

  • 方法1:先将弹出层写好放在DOM中,css样式搞成display:none;;到时候触发时,一个$(selector).show();就搞定了!

  • 方法2:触发注册时,用函数$('body').append(“这里为弹出层的HTML内容”);实现

Now,我们动手做一个弹出框吧!(我选第二种方法实现哈)

第一步:写出弹出框的html代码(这儿简单弄了一个)

<div id=register style="position:fixed; height:200px; width:400px; background:#CCC;">
<em id="close" style="font-size:30px; float:right; margin-right:20px;">×</em>
<h3 style="color:#FFF; text-align:center;">注册框实例</h3>
<p style="text-align:center;"><input type="text" id="username" placeholder="用户名"  /></p>
<p style="text-align:center;"><input type="password" id="userpass" placeholder="密码" /><em id="strength">这儿放置密码强度</em></p>
<p style="margin:40px auto 0 auto;height:30px;width:180px;background:#09C;color:#FFF;font-size:18px;text-align:center;line-height:30px;border-radius: 6px;">注册</p>
</div>

第二步:弹出这个注册框的函数

function showWindow(){  //弹出窗口
    var htm="<div id='register' style='position:fixed; height:200px; width:400px; background:#CCC;'><em id='close' style='font-size:30px; float:right; margin-right:20px;'>×</em><h3 style='color:#FFF; text-align:center;'>注册框实例</h3><p style='text-align:center;'><input type='text' id='username' placeholder='用户名'  /></p><p style='text-align:center;'><input type='password' id='userpass' placeholder='密码' /><em id='strength'></em></p><p style='margin:40px auto 0 auto;height:30px;width:180px;background:#09C;color:#FFF;font-size:18px;text-align:center;line-height:30px;border-radius: 6px;'>注册</p></div>";
    $("body").append(htm); //将弹出框的html代码添加到<body>里
    return false;
    }

在很多情况下,我们都想弹出的框框是在屏幕中间位子的,所以,我们现在用jQ写一个居中的函数吧!

function center(id){  //用于使弹出窗口居中,参数表示要居中元素的id
    var h=$(window).height();  //获取浏览器窗口高度
    var w=$(window).width();  //获取浏览器窗口宽度
    var fh=$("#"+id).height();//获取弹出框窗口高度
    var fw=$("#"+id).width();//获取弹出框窗口高度
    $("#"+id).css({
        "top":(h-fh)/2,
        "left":(w-fw)/2
        });
}
$(window).resize(function(){
        center("register");
        });  //确保浏览器窗口大小改变,弹出框任仍能居中

第三步:点击右上角关闭

function removeWindow(){  //用于关闭窗口
    $("#register").fadeOut(function(){$("#register").remove();}); //先将窗口渐渐隐藏,在通过回调函数将窗口的HTML全部从<body>中移除。等价于 $("#register").remove(); 只是看起来效果差别
    return false;
    }

那么一下拼凑起来,就是:

<!DOCTYPE html> 
<head>
<meta charset="utf-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
</head>
<body>
<div id='button' style='margin:40px auto 0 auto;height:30px;width:180px;background:#09C;color:#FFF;font-size:18px;text-align:center;line-height:30px;border-radius: 6px;'>注册</div>
<script>
$(document).ready(function(){
    $("#button").click(function(){
        showWindow();
        center("register");
        $("#close").click(function(){
            removeWindow();
            });
    });


    function showWindow(){
        var htm="<div id='register' style='position:fixed; height:200px; width:400px; background:#CCC;'><em id='close' style='font-size:30px; float:right; margin-right:20px;'>×</em><h3 style='color:#FFF; text-align:center;'>注册框实例</h3><p style='text-align:center;'><input type='text' id='username' placeholder='用户名'  /></p><p style='text-align:center;'><input type='password' id='userpass' placeholder='密码' /><em id='strength'></em></p><p style='margin:40px auto 0 auto;height:30px;width:180px;background:#09C;color:#FFF;font-size:18px;text-align:center;line-height:30px;border-radius: 6px;'>注册</p></div>";
        $("body").append(htm);
        return false;
        }

    function removeWindow(){
        $("#register").fadeOut(function(){
            $("#register").remove();
            });
        return false;
        }

    function center(id){
        var h=$(window).height();
        var w=$(window).width();
        var fh=$("#"+id).height();
        var fw=$("#"+id).width();
        $("#"+id).css({
            "top":(h-fh)/2,
            "left":(w-fw)/2
            });
    }
    $(window).resize(function(){
    center("register");
    });

});


</script>
</body>
</html>

评论
发表评论
2年前
添加了一枚【评注】:我测试一下
4年前

我稍微修改了一下,给弹出层的注册添加了一个id='zhuce'然后 绑定了一个动作 function zhucezhanghao(){ $("#zhuce").click(function(){ alert("注册成功!") }); return false; } 。为什么没有弹出注册成功,是我哪里写错了吗

4年前
赞了此文章!
5年前
赞了此文章!
5年前

@huugle 嗯 用 绝对定位 然后在用margin 计算 使得弹出框绝对居中是吧

5年前

为什么弹出注册框中的函数要用 renturn false

6年前

@huugle 应站长要求,这些文章是给初学者借鉴的哈,给初学者的感觉应该是reachable,不应该在别人才开始学东西的时候就让别人很有压力,你的意见挺好哈,有时间可以交流交流,呵呵!

6年前

@huugle 这个文章写的东西的确比较初级,先进的理念也比较少,不过这种分享精神还是值得鼓励的。

6年前

这种弹出框.最好是不要把结构跟脚本结合的太紧密了.比如居中 完全可以用css实现的就没必要用js去计算了. 还有显示隐藏的可以用一个样式去控制.直接写行内也不是很友好.模块其实可以预先定义好的.脚本需要做的就只是显示跟隐藏.这样会比较好一些.个人意见.

6年前

@韩松Stone 多谢关注!

6年前

嗯,学习了。期待“密码强度判断、验证表单内容是否符合要求、Ajax提交”的更新~~~ 谢谢啦啦啦~~~~

WRITTEN BY
wanisan
hello world!
TA的新浪微博
PUBLISHED IN
jQuery基础

欢迎各位大拿来写一些心得总结指导下初学者

我的收藏