juery 弹出框 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    *{margin:0;padding:0;}
    #login{width:300px;height:300px;border:1px solid black;position:relative;}
    #close{position:absolute;top:0;right:0;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
    $(function(){
        $('#input1').click(function(){
            var oLogin = $('<div id="login"><p>用户名：<input type="text" value="" id="input2"/></p><p>密码：<input type="text" value="" id="input2"/></p><span id="close">x</span></div>'); //juery 创建元素<> 注意不要留有空格
        
        
        $('body').append(oLogin);
        oLogin.css('left',($(window).width() - oLogin.outerWidth())/2);
        oLogin.css('top',($(window).height() - oLogin.outerHeight())/2);
        
        $('#close').click(function(){
            oLogin.remove();
        });
        
        $(window).on('resize scroll',function(){
            oLogin.css('left',($(window).width() - oLogin.outerWidth())/2);
            oLogin.css('top',($(window).height() - oLogin.outerHeight())/2+$(window).scrollTop());
        });
       });
    });
    
</script>
</head>

<body style="height:2000px;">
    <input type="button" value="点击" id="input1"/>
   
</body>
</html>

 

posted on 2018-07-09 22:14  朝颜陌  阅读(120)  评论(0)    收藏  举报

导航