Creating a Basic Overlay Effect in jQuery

Introduction

This article introduces how to work with overlays in jQuery and how to use them in a proper and user-friendly way. Before proceeding, let us understand what overlay means. If we break this word into the two parts "over" + "lay" then over means "extending directly upward" and lay stands for layer. So if we combine these two words we get "overlay" that means a layer over HTML Elements.

Uses

Overlays are used to:

  • Emphasize any element.

  • Prevent a user from interacting with those elements that are not required.

  • For your requirements if it's different from the above two.

Various ways of creating an overlay

We have various ways to create an overlay like:

  • Using jQuery plugin

  • Using Customized JavaScript

  • Using this article.

Logic behind an Overlay

Before creating an overlay we need to understand the logic behind it. Let's understand it step-by-step as in the following:

  1. An overlay consists of two things, one is the layer and the other is the element to be shown on that layer.

  2. So now we need to design the overlay layer first. The layer can be a Div, Image, Iframe or a combination of any of those. In this article we'll be using the combination of image and Div.

  3. Next we will design the CSS for that layer. The important properties are display and position. "Display" should be set to "none" so that we can show it using JavaScript and "Position" can be either "fixed" or "absolute". We will set the height and width in JavaScript only.

  4. In the last step we will write JavaScript code. We will use the following procedure to create an overlay.

  5. Get the user click on an element at which you want the overlay to be visible.

  6. Now set the height and width of the layer equal to the client screen.

  7. Set the opacity of the layer to a alue between 0 and 1.

  8. Now the layer is on, we'll just popup the content on that layer.

  9. We need to remove that overlay when the user closes our content. For that we need to detect when our content is closed. For that we can either provide a close button and use the click event of that button to hide the layer. The second option that we will use is a Dialog event "beforeClose" that fires when the dialog is about to close but not closed and the close event is fired after the closing of the dialog.

Implementing the Overlay

First create an empty HTML file and paste this code into it:

 <html>

<head>

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css"rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

    <meta charset="utf-8" />

    <title>Overlay by Arpit</title>

      <style>

        /* we will use this section for adding css classes or any styling */

    </style>

 </head>

<body>

       <!-- HTML will go here -->

      <script>

          $(document).ready(function () {

              // We will use this for adding our jQuery or scripts

          });

    </script>

</body>

</html>

Now let us create a div for our overlay with a class name "overlay". Append this code in your HTML file between the body tags and above the script.

  1. <div id='open'>

  2. Open Dialog

  3. </div>

  4. <div class='overlay'>

  5. <div id='dlg'>

  6. <iframe src="http://c-sharpcorner.com" id="if"></iframe>

  7. </div>

  8. </div>

Lines 1-3 create an element on which the user will click and the overlay becomes active. Lines 4-8 create the layer of the overlay. Line 6 contains the content of the overlay. It is what is on the overlay.

Our HTML is ready. Now we need to prepare the CSS for this. The CSS is quite simple. Append the following CSS in your style section.

  1. #dlg{

  2. width:500px;

  3. height:500px;

  4. display:none;

  5. }

  6. .overlay{

  7. position:absolute;

  8. top:0;

  9. left:0;

  10. display:none;

  11. background-color:black;

  12. background:url("http://www.c-sharpcorner.com/UploadFile/BreakingNewsImages/07242013032533AM.jpg");

  13. }

  14. #if{

  15. border:0;

  16. width:500px;

  17. height:500px;

  18. }

Lines 1-5 are for a dialog, or you can say your overlay content container. The display is "none" because we don't want it to be visible in the beginning. We will show it using JavaScript.

Lines 6-13 are for your overlay layer design. Design it as well as you can. The display is "none" because we don't want it to be visible in the beginning. We will show it using JavaScript.

Lines 14-18 are just for extra style on the iFrame.

After this our task is to make everything alive. We need to provide the heart in that page. The heart is our JavaScript. So let's start writing it.

Append this code snippet in the JavaScript section of your file :

  1. $(document).ready(function () {

  2.     $('#open').click(function () {

  3.         $(".overlay").height($(window).height());

  4.         $(".overlay").width($(window).width());

  5.         $(".overlay").fadeTo(1000, 0.4);

  6.         $("#dlg").dialog({

  7.             width: "auto",

  8.             height: "auto",

  9.             show: {

  10.                 effect: "slide",

  11.                 duration: 1500

  12.             },

  13.             hide: {

  14.                 effect: "slide",

  15.                 duration: 1500

  16.             },

  17.             beforeClose: function () {

  18.                 $(".overlay").fadeTo(1000, 0);

  19.             },

  20.             close: function () {

  21.                 $(".overlay").css("display", "none");

  22.             },

  23.             resizeStop: function (event, ui) {

  24.                 $("#if").height($(this).height());

  25.                 $("#if").width($(this).width());

  26.             }

  27.         });

  28.     });

  29. });

Line 2 is binding a click event on div having id open. Lines 3-28 will be executed if the user clicks on that div. Line 3 and 4 calculate the overlay height and width. "Window" defines the current screen of the user. So "window.height()" is returning the height of the user window. The same for line 4, line 5 brings the layer onto the screen by showing the smooth fade-in effect for 1 second. 0.4 is the opacity of the layer. Lines 6 to 23 are for overlay content. The dialog will be shown to the user that contains an iframe in it. Lines 9 and 13 set the show and hide options of the dialog. Line 17 detects the close event. As soon as the user closes the dialog, the layer will be set transparent to the user. Lines 20 and 21 are very important. After the dialog is closed it is necessary to set the display to none, otherwise the user won't be able to interact with the rest of the elements because the transparent div is hiding them. One more thing is that line 21 should be after line 18 to keep the animation smooth.  Lines 23 to 26 are not required for making an overlay. They are used to set the size of IFrame dynamically when the user resizes the dialog. "resizeStop" is an event of the jQuery dialog that fires when the user stops resizing the dialog. You can also disable the resizing by setting "resize" option to "false".

Output

Click the button to open the overlay.

a5p1e.PNG

Overlay opening:

a5p2e.PNG.jpg

Overlay complete:

a5p3.PNG

Overlay closing:

a5p4e.PNG.jpg

Summary

That's it; all is done. It's time to run it. You can check the live output here. This is the basic overlay. You may have a different style and design to suite your needs. The basic rule is to just make two divs, one that covers the entire screen called layer and another is the content to show over that layer.

Don't forget to comment. :) 

Next Recommended Readings