-2

I have the following JSFIDDLE that i am working on to show an overlay. However, when shown it has a border around the overlay and seems to create a larger area therefore placing scroll bars onto the page and i can not figure out why that is?

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

the js code is:

$('.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();
});

​

The HTML is:

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

And the CSS is:

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

What am i missing (or need to take out)? Thanks!

StealthRT
  • 10,108
  • 40
  • 183
  • 342

3 Answers3

1

Just add:

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

to your css, here's the modified fiddle.

Note: margin is the key in most browsers and padding combined with margin gets the rest.

Side Note: This is a actually one of those things you need to do for most pages to get them to display the same across various browsers.

EDIT:

Here's a fiddle that fixes that too. The problem is jQuery sets the size wrong (under these conditions), so, we set it ourselves with:

document.getElementById('overlay').style.height = window.getComputedStyle(document.getElementById('content')).height;
vdbuilder
  • 12,254
  • 2
  • 25
  • 29
  • Awesome! But building on your code, i have a scroll up part that doesn't seem to show the full overlay if scrolling past the default page size? http://jsfiddle.net/fXDu7/2/ – StealthRT Oct 25 '12 at 17:20
  • Did you see my modded JSFIDDLE? http://jsfiddle.net/fXDu7/2/ – StealthRT Oct 25 '12 at 17:29
  • @StealthRT I'm looking at it now. – vdbuilder Oct 25 '12 at 17:31
  • @StealthRT Updated answer to fix the height problem. How about an upvote and/or accepting an answer? – vdbuilder Oct 25 '12 at 17:52
  • Ok, ran into a problem and could not do it that way. I have again modified my code (http://jsfiddle.net/hyp2u/2/) to just overlay on a DIV and not the whole page... but its not working. – StealthRT Oct 25 '12 at 19:25
  • @StealthRT You have a new question so ask it. This one was solved, already! – vdbuilder Oct 25 '12 at 20:17
0

You need to add top:0; left:0; to your #overlay CSS.

skybondsor
  • 747
  • 10
  • 21
0

I messed around with your content/body padding & margins. Also because you're positioning absolutely, you can specify distance from top/left with percentage so you're border responsively resizes:

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

​

fusion27
  • 2,396
  • 1
  • 25
  • 25