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>

转载于:https://www.cnblogs.com/simq/archive/2012/12/03/2800230.html

你可能感兴趣的:(jquery实现div绝对居中+div可移动+后背景变暗)