-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があります。

注: ほとんどのブラウザーではマージンが重要であり、残りは余白と組み合わせたパディングです。

補足: これは、さまざまなブラウザーで同じように表示するために、ほとんどのページで実際に行う必要があることの 1 つです。

編集：

これもそれを修正するフィドルです。問題は、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 に答える