jQuery实例-简单选项卡-【一些常见方法（2）-练习】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../jq-practice/jq/jquery-2.2.1.min.js"></script>
    <script>
        $(function(){
            $('.input1').click(function(){
                var oLogin=$('<div class="login"> <p>用户名：<input type="text" /></p> <p>密码：<input type="text" /></p> <div class="closeIcon">X</div> </div>');
                $('body').append(oLogin);
                oLogin.css('left',($(window).width()-oLogin.width())/);
                oLogin.css('top',($(window).height()-oLogin.height())/);

                $(window).on('resize scroll',function(){
                    oLogin.css('left',($(window).width()-oLogin.width())/);
                    oLogin.css('top',($(window).height()-oLogin.height())/ + $(window).scrollTop());
                })
                $('.closeIcon').click(function(){
                    oLogin.remove();
                })
            })

        })
    </script>
    <style>
        .login{
            position: absolute;
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        .closeIcon{
            position: absolute;
            right: 0px;
            top:0px;
        }
    </style>
</head>
<body style="height: 2000px;">
<input type="button" value="点击" class="input1"/>
<!--<div class="login">-->
    <!--<p>用户名：<input type="text" /></p>-->
    <!--<p>密码：<input type="text" /></p>-->
    <!--<div class="closeIcon">X</div>-->
<!--</div>-->

</body>
</html>