JQuery效果—编写弹窗

JQuery编写弹窗

<script>
    $(function () {
        $("#btn").click(function () {
            var div=$('<div id="div">用户名：<input type="text"><br/>密码：<input   type="password"><span>X</span></div>');
            $("body").append(div);
            div.css({
                "left":($(window).width()-div.outerWidth())/2,
                "top":($(window).height()-div.outerHeight())/2
            });

   $("#div span").click(function () {div.remove();})

$(window).on('resize scroll',function () {
                div.css({
                    "left":($(window).width()-div.outerWidth())/2,
                    "top":($(window).height()-div.outerHeight())/2+$(window).scrollTop()
                });
            })
        })
    })
</script>