有人能帮我修一下吗?我需要它在中间对齐,即使你放大你的浏览器



这是代码,谁能帮我解决这个问题,我想让它保持居中,它会相对扩大蒙版,即使你放大你的浏览器,给它一个尝试,所以你会知道我在说什么,我不是专家,我还在学习

<!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>Simple JQuery Modal Window from Queness</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {  
        var id = '#dialog';
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
        //transition effect
        $(id).fadeIn(2000);     
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
    });     

});
</script>
<style type="text/css">
}
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
.close {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
    background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
    background-color:#f9f9f9;
    -webkit-border-top-left-radius:20px;
    -moz-border-radius-topleft:20px;
    border-top-left-radius:20px;
    -webkit-border-top-right-radius:20px;
    -moz-border-radius-topright:20px;
    border-top-right-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    -moz-border-radius-bottomright:20px;
    border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
    -moz-border-radius-bottomleft:20px;
    border-bottom-left-radius:20px;
    text-indent:-0.48px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#666666;
    font-family:Verdana;
    font-size:11px;
    font-weight:bold;
    font-style:normal;
    height:18px;
    line-height:18px;
    width:18px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #ffffff;
    display:inline;
    z-index:3200; position:absolute; top: -10px; right:-10px; cursor:pointer;}
}
.close:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
    background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
    background-color:#e9e9e9;
}
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}
#boxes #dialog {
  width:728px; 
  height:90px;
  padding:10px;
  background-color:#ffffff;
}
</style>
</head>
<body>
<div id="boxes">
<div id="dialog" class="window">
<a href="#" class="close">X</a>

</div>
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
</body>
</html>

尝试插入<body align="center">或将整个身体包裹在<div id="something">中并给予#something { text-align:center; }

中的CSS在您的代码的<head></head>

最新更新