CSS - 加载页面时的网站覆盖[关闭]

Question

Im setting up a website with a different navigation structure compared to whats traditional, and i want to add a overlay on top of the site which is loaded when the user enters the site the first time.

The overlay should be fullscreen, black "opacity=50", and im going to add simple text about how to use the website. It should also go away when klicking

Im a web designer, and i have limited knowledge in coding. (some css/html/php)

Is there a simple way to add a class for this?

Thanks for feedback

Answer 1

Google it! It's not hard. A very quick Google search brought me here:

$(function() {
    var docHeight = $(document).height();
    $("body").append("<div id='overlay'></div>");
    $("#overlay").height(docHeight).css({
        'opacity' : 0.4,
        'position' : 'absolute',
        'top' : 0,
        'left' : 0,
        'background-color' : 'black',
        'width' : '100%',
        'z-index' : 5000
    });
});

To close the overlay by clicking anywhere you can do the following:

$('#overlay').click(function (e) {
    this.remove();
});

Here's a jsFiddle to demonstrate.