Display various foreground pages

[SimonIoa]

Hello i want a script that shows various text content in the foreground and closes witn an X and shows the original page. Any suggestions?

[gentlemedia]

How do you want to show that 'foreground' which I assume you mean an overlay. On page load, on click or any other event?

[SimonIoa]

On page load and to close on user request. An X tha it is. Thanks gentlemedia

[gentlemedia]

Here's a jQuery version
http://codepen.io/gentlemedia/pen/bqQxJP

Here's a CSS with the checkbox hack version:
http://codepen.io/gentlemedia/pen/NpEOgx

[SimonIoa]

Thanks thats exactly what i wanted.

[SimonIoa]

Ok, now in that overlay i want to put a slider from top to bottom that has 4 slides - 4 divs. I didnt find anything online. Any link gentlemedia? You are a saver!

[SimonIoa]

OK i found it

http://fiddle.jshell.net/chetanmani/0suk5v3t/2/light/
for up and down change

function cycle() {
        $(banners[i%len]).slideUp(fade, function() {
            $(banners[++i%len]).slideDown(fade, function() {
                setTimeout(cycle, delay);   
            });
        });

[SimonIoa]

I want to add one last thing.

On this script i want the last slider to remain until the next one comes from the top?

 var delay = 3000,
        fade = 1000;
    var banners = $('.banner');
    var len = banners.length;
    var i = 0;
    setTimeout(cycle, delay);

 function cycle() {
    $(banners[i%len]).slideUp(fade, function() {
        $(banners[++i%len]).slideDown(fade, function() {
            setTimeout(cycle, delay);   
        });
    });
}