Question

I would like to know how to make ad appear like in this site:
http://www.kraniem.lv/
Just dont click X otherwise ad will close and will be visible only next day again.

Answer 1

Css:

#ad{
position: absolute; /* Or position:fixed; */
z-index: 2;
}

jQuery:

$(document).ready(function(){
    $("#ad").css("top", (($(window).height() - $("#popup").outerHeight() ) / 2) + 'px');
    $("#ad").css("left",(($(window).width() - $("#popup").outerWidth() )/ 2 ) + 'px');
});

Please note that if you want to use images, you’ll need to write it as:

$("#ad").css("top", (($(window).height() - $("#popup").outerHeight() - imgheight) / 2) + 'px');

because basically, the image loads after the document dom was loaded, so I usually parse the image height as one of the attributes, so I’ll know what to subtract.

Please note that the link didn’t work for me, so I’m just writing based on prior works I did.

Edit:
to make a UI screen block:

CSS:

#blanket{
position:absolute;
left:0px;
top:0px;
opacity:0.7;
z-index:1;
width: 100%;
}

jQuery:

$("#blanket").css("height", $(document).height() + 'px');

HTML:

<div id="blanket"></div>
<div id="popup"></div>