How to show a web page overlay with a message in seconds with ease?

A very interesting example – to show how you can add an overlay to a html page. This example is very simple to use.

Steps to follow:

1. Open the page where you want to add the overlay with a text message and add the following code:

3. Add the following css / style to your style-sheet file.

.data-overlay{ 
    position:fixed; 
    background: rgba(255,255,255,0.90); 
    height:100%; 
    width:100%; 
    top:0; 
    bottom:0; 
    z-index:1000;
}

.message{ 
    top: 50%;
    left: 50%;
    position: absolute;
    font-size: 18px;
    font-weight: 600;
    z-index: 1001;
    border: solid 1px #ddd;
    border-radius: 3px;
    padding: 15px 25px;
    color: #444;
}

Save the files and see the effect in any browser.

Hope this example was useful to you. Thanks!