Recently i had to work in a project where this full screen overlay had to be shown with just a message in the middle of screen. I was already using Bootstrap 4 but did not want to put Modal Divs inside the page html – that approach was too much bloated for displaying such a simple overlay.
So what i did was – create a simple full screen overlay using jQuery and CSS. In this approach the overlay and the message in it, both are dynamically created and styled using jquery.
First we need some CSS properties to apply to the overlay, message and the close button for the overlay.
The overlay div will expand and cover the whole screen. It will start from the top left corner and expand to bottom right corner, and must remain in place if the main content beneath is scrolled up and down. So the best option here is to use CSS property ‘fixed’ for the the overlay div.
The div must cover the entire length and breadth of the visible screen. Hence “width: 100%” and “height: 100%” must be added. We must also set the starting positions which are at “top: 0” and “left: 0”.
Overlays usually have black background with transparency less than 1. Let us set it at “background-color: rgb(0,0,0, 0.71)”.
Finally to make for a nice transition effect i am adding a transition delay like “transition: 2s”.
Here is the full list of css properties:
.overlay-styles {
height: 100%;
width: 100%;
position: fixed;
z-index: 99999;
left: 0;
top: 0;
background-color: rgba(0,0,0, 0.71);
overflow-x: hidden;
transition: 2s;
}
Next we need to style the message that will appear in the middle of the overlay.
.overlay-content-styles {
position: absolute;
top: 40%;
left: 25%;
text-align: center;
width: 50%;
transition: 0.2s;
z-index: 10;
}
The message is wrapped inside a h1 element. So we need css for that too:
.overlay-content-styles > h1 {
color: #ccc;
background: $cecece;
border: 2px solid #ccc;
margin: 0;
border-radius: 20px;
padding: 0;
}
That is all styling we need. Now onto the jQuery part.
First we create the overlay div with jquery and assign it to a variable.
var overlay = $('<div></div>');
Next we make it a part of DOM
$("body").append(overlay);
The overlay needs CSS properties to work. jQuery fadeIn method provides it a nice transition effect and loads the overlay with a delay.
overlay.fadeIn(2000).addClass('overlay-styles');
Once overlay is loaded, it needs to show the message. We create the content div with a previously defined CSS class.
var overlayContent = $('<div>')
.html('<h1>Some message here...</h1>')
.addClass('overlay-content-styles');
This project requires that the overlay is loaded first and the message next, so we need a way to load the message only after the overlay has finished loading and rendering.
jQuery has a bind method that will allow us do so. Here is the syntax :
Element.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){});
The callback is an anonymous function where we put the code which will be executed once the CSS transition for the Element is completed. This can also be a named function with parameters.
overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
function() {
$('body').append(overlayContent);
$('body').append(closeBtn);
}
);
Finally we need to create the “close” button and associate a click event with it which will allow us to close the overlay.
var closeBtn = $("<a></a>");
closeBtn.text('X');
closeBtn.addClass('close-button-styles');
closeBtn.on('click', function(){
overlay.remove();
overlayContent.remove();
closeBtn.remove();
});
Here is the full code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.overlay-styles {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: rgba(0,0,0);
opacity: 0.87;
overflow-x: hidden;
transition: 2s;
}
.overlay-content-styles {
position: absolute;
top: 40%;
left: 25%;
text-align: center;
width: 50%;
transition: 0.2s;
z-index: 10;
}
.overlay-content-styles > h1 {
color: #ccc;
background: $cecece;
border: 2px solid #ccc;
margin: 0;
border-radius: 20px;
padding: 0;
}
.close-button-styles {
position: fixed;
top: 0;
right: 0;
margin-right: 20px;
margin-top: 20px;
display: block;
cursor: pointer;
color: grey;
z-index: 20;
font-size: 20px;
border: 1px solid grey;
padding: 2px 5px;
border-radius: 5px;
opacity: 0.5;
}
</style>
</head>
<body>
<div id='content'>
<h1>Main Content header</h1>
<p>Main content here....</p>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var overlay = $('<div></div>');
$("body").append(overlay);
overlay.fadeIn(2000).addClass('overlay-styles');
var overlayContent = $('<div>')
.html('<h1>Some message here...</h1>')
.addClass('overlay-content-styles');
overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
function() {
$('body').append(overlayContent);
$('body').append(closeBtn);
}
);
var closeBtn = $("<a></a>");
closeBtn.text('X');
closeBtn.addClass('close-button-styles');
closeBtn.on('click', function(){
overlay.remove();
overlayContent.remove();
closeBtn.remove();
});
});
</script>
</html>
That is all! If you want to test the code, you can download it here.
Feedbacks, questions and comments are appreciated!
Copyright Web/ Design/ Vista 2022 ©