How to add an overlay to your webpage?

Sometimes, We want our website visitors to focus on a certain text or element on the webpage and at the same time making the other part of the page appear in the background with very little visibility. In this article, We will achieve this using some CSS styling.

HTML

<button onclick="showOverlay()">Show Overlay</button>
<div id="overlay">
<div class="overlay-content">
<p>Hey! This will display in the center of the screen with an overlay.</p>
<button onclick="closeOverlay()">Close Overlay</button>
</div>
</div>

CSS

<style type="text/css">
#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 100;
    cursor: pointer;
}
.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 300px;
    background: #fff;
    padding: 20px;
    border-radius: 4px;
}
</style>

Javascript

<script type="text/javascript">
function showOverlay(){
jQuery('#overlay').show('slow');
}
function closeOverlay(){
jQuery('#overlay').hide('slow');
}
</script>

DEMO