jquery实现div绝对居中+div可移动+后背景变暗

综合网上的资料所写成，代码比较短，好理解。
<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<script type="text/javascript">
    $(function(){    
            
                        
            function moveMid()
            {
                $('#test').css({
                    'top':( $(window).height()-$('#test').outerHeight() )/2+ $(document).scrollTop(),
                    'left':($(window).width()-$('#test').outerWidth() )/2
                    });    
            }
            
            moveMid();
            
            $(window).resize(function(){
                    moveMid();
                });
    
                            
                
            $('button').click(function(){
                $('.bg').css({'display':'block'})
                $('#test').show();
                });
                
            $('#test').draggable({handle:"p.move"});
        });
</script>

<style type="text/css">
body{margin:0px auto;}
.bg{width:100%;height:100%;z-index:1000;background:#333;display:none;position:absolute;top:0;left:0; -moz-opacity:.7; opacity:0.7; filter:alpha(opacity=70)}

#test{width:30%;height:20%;background:#fff;display:none;z-index:1001; position:absolute}
#test p{background:#06F;color:#FFF;border:solid 1px #09F;padding:0;margin:0;height:20px;cursor:move}
</style>

</head>
<button>按我弹出对话框</button>
<div class="bg"></div>
<div id="test">
<p class="move">按我可以移动窗口</p>
这是内容</div>


<body>
</body>
</html>
posted on 2012-12-03 20:04 simq 阅读(481) 评论(0) 收藏举报