JQuery наложение границы ситуации

У меня есть следующий 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();
});

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;}

Чего мне не хватает (или нужно взять)? Спасибо!

Источник

3 ответа

Решение

Просто добавь:

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

к вашему css, вот измененная скрипка.

Примечание: маржа является ключом в большинстве браузеров, а отступы в сочетании с полем получают остальное.

Примечание: на самом деле это одна из тех вещей, которые нужно сделать для большинства страниц, чтобы они отображались одинаково в разных браузерах.

РЕДАКТИРОВАТЬ:

Вот скрипка, которая тоже это исправляет. Проблема в том, что jQuery устанавливает неправильный размер (в этих условиях), поэтому мы устанавливаем его сами с помощью:

document.getElementById('overlay').style.height = window.getComputedStyle(document.getElementById('content')).height;
Источник

Вам нужно добавить top:0; Слева направо: 0; на ваш # оверлейный CSS.

Источник

Я бездельничал с твоим содержанием / дополнением тела & краями. Кроме того, поскольку вы позиционируете абсолютно, вы можете указать расстояние сверху / слева в процентах, чтобы вы гранично изменяли размеры:

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;
}

Источник
Другие вопросы по тегам