弹出框1

最近做番茄项目用到了这个弹出框，虽然很简单，但是还想总结一下。

一、html

<div id="wrong">账号或密码错误</div>

二、css

/*弹出框样式*/
#wrong{
    position:absolute;
    width:150px;
    padding:8px;
    background:#eee ;
    border:1px solid #ccc;
    left:63%;
    top:0px ;
    z-index:9999;
    display:none;
}

三、js

    //判空
    if ($username == "") {
        if (!$('#wrong').is(':visible')) {
            $('#wrong').html('邮箱/手机号不能为空').css({ display: 'block'}).animate({ top: '240' }, 400, function () {
                setTimeout(out, 2000);
            });
        };
        function out() {
            $('#wrong').animate({ top: '0' }, 500, function () {
                $(this).css({ display: 'none'});
            });
        }

【用到的知识点】

1.定位

 绝对定位：position:absolute;默认为窗体左上角（若祖先节点有relative，则是相对于祖先节点的左上角定位）

相对定位：position:relative;

2.animate()方法

 执行css属性集的自定义动画

$(selector).animate({params},speed,callback);

 

    必需的 params 参数定义形成动画的 CSS 属性。

    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

    可选的 callback 参数是动画完成后所执行的函数名称。

3.setTimeout()方法

setTimeout(code,millisec)

 用于在指定的毫秒数后调用函数或计算表达式