JQuery动态创建弹出窗口-罗分明网络博客

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
         var tContent=['罗分明','lqwvje','995w.com','luofenming.com']
            $('#btn1').click(function () {
                //如果没有创建才会创建
                if ($('#div1').length == 0) {
                    var pointX = $(this).offset().left;//获取当前离body左位置
                    var pointY = $(this).offset().top + 25;//获取当前离dody顶位置 $(this).height()这个可以获取当前对象的高度
                    //创建弹出窗口
                    var div11=  $('<div style="width:200px;height:150px;border:1px solid blue;position:absolute;" id="div1">        <span style="float:right;cursor:pointer" id="close1">关闭</span><div id="div2" style="clear:both;"></div>    </div>').appendTo('body');
                    div11.css({ 'left': pointX + 'px', 'top': pointY + 'px' });

                    //动态加载内容到ID=DIV2的DIV里面
                    for (var t in tContent) {
                        $('#div2').append(' @'+tContent[t]);
                    }

                    //关闭  JQuery有自杀功能
                    $('#close1').click(function () {
                        $(this).parent().remove();
                    });
                }
             
            });           
        });
    </script>
</head>
<body>
    <input type="button" id="btn1" value="test"  style="position:absolute; left:400px;top:100px;"/>

</body>
</html>