-2

我正在处理以下 JSFIDDLE 以显示叠加层。但是，当显示时，它在覆盖层周围有一个边框，似乎创建了一个更大的区域，因此在页面上放置了滚动条，我不知道为什么会这样？

http://jsfiddle.net/Tnjew/2/

js代码是：

$('.link').live('click',function(event){
    event.preventDefault();
    var $this    = $(this),
        $overlay = $('#overlay');

    $overlay.fadeIn();
});

$('#overlay').live('click',function(event){
    event.preventDefault();
    var $this    = $(this),
        $overlay = $('#overlay');

    $overlay.fadeOut();
});

​</p>

HTML 是：

<div id="overlay"><span><br /><br /><br /><br /><br /><br /><br />Click again to close overlay</span></div>

<div id="content">
    This is just a demo of this overlay
    <a class="link">Click HERE to show overlay</a>
</div>

CSS是：

#overlay {
    position:absolute; 
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.8);
    text-align:center;
    z-index:999;
    display:none;
}

#overlay span {
    text-align:center;
    z-index:1001;
}

body {background-color: #000; color: #fff;}

我错过了什么（或需要取出）？谢谢！

4

3 回答 3

1

只需添加：

html,
body{
    padding:0px;
    margin:0px;
}

对于您的 css，这是修改后的fiddle。

注意：margin 是大多数浏览器中的关键，而 padding 与 margin 结合使用剩下的。

旁注：这实际上是大多数页面需要做的事情之一，以使它们在各种浏览器中显示相同。

编辑：

这是一个也可以解决这个问题的小提琴。问题是 jQuery 设置了错误的大小（在这些条件下），所以我们自己设置：

document.getElementById('overlay').style.height = window.getComputedStyle(document.getElementById('content')).height;
于 2012-10-25T17:17:30.723 回答
0

您需要添加 top:0; 左：0；到你的#overlay CSS。

于 2012-10-25T17:16:11.647 回答
0

我弄乱了您的内容/正文填充和边距。此外，因为您是绝对定位，您可以使用百分比指定与顶部/左侧的距离，以便您响应地调整边框大小：

http://jsfiddle.net/jmwBW/

#overlay {
    position: absolute;
    width:98%;
    height:98%;
    background-color:rgba(255,255,255,0.8);
    text-align:center;
    z-index:999;
    display:none;
    margin: auto;
    padding: 0;
    vertical-align: center;
    top: 1%;
    left: 1%;

}

#overlay span {
    text-align:center;
    z-index:1001;
}


#content{
    padding: 0;
    margin: 0;
}

body {
    background-color: #000; 
    color: #fff;
    margin: 0;
    padding: 0;
}

​</p>

于 2012-10-25T17:24:04.350 回答