Display Overlay using JQuery

In this post I would like to explain on how to display an overlay using JQuery Plugin.

To continue with our implementation it is required to download required js and css files from here. It is required to call the below required js and css files in your html page

<link href=”css/jquery-ui.min.css” rel=”stylesheet” type=”text/css” />
<script src=”js/jquery.min.js”></script>
<script src=”js/jquery-ui.min.js”></script>


Step 1: Build HTML Content

Place the below code under HTML body tag. First div of this code is used to place a link on html page to click by customer and second div is used to display the overlay. This overlay contains an iFrame which displays the site : http://malliktalksjava.in

<div id=’open’>
<a href=”#”>Click here to Get Overlay</a>
<div class=’overlay’>
<div id=’displayOverLayDiv’>



Step 2: Build Styles for the HTML content

Place the below code in between <style> tag of the header html. This code is used to apply the required basic styles for the above mentioned html content.

#displayOverLayDiv {
width: 500px;
height: 500px;
display: none;

.overlay {
position: absolute;
top: 0;
left: 0;
display: none;
background-color: black;
background: url(“http://malliktalksjava.in&#8221;);

#frame {
border: 0;
width: 500px;
height: 500px;

#open {
border: 0;
width: 175px;
height: 24px;
background-color: #EAF8F8;
font-size: 18 px;
font-weight: bold;


Step 3: Write the Java Script Logic to display the Overlay

Place below given java script code in between script tag of your html page.

$(document).ready(function () {
$(‘#open’).click(function () {
$(“.overlay”).fadeTo(1000, 0.4);
width: “auto”,
height: “auto”,
show: {
effect: “slide”,
duration: 1500
hide: {
effect: “slide”,
duration: 1500
beforeClose: function () {
$(“.overlay”).fadeTo(1000, 0);
close: function () {
$(“.overlay”).css(“display”, “none”);
resizeStop: function (event, ui) {

Access the application in your browser, then you should be able to see the overlay when you click on the link available in html page.

Click Here to get the complete Sample html file.


Other Useful links:

List of Java script MVC Frameworks

Enabling javascript in browsers

Decimal Validation in JavaScript

Creation of Dynamic rows in javascript

Top Javascript Charting Frameworks



I born in Good cultural place called India. My family is traditional family. We fallow all Indian traditions.

Tagged with: , , , , , ,
Posted in JavaScript, JQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 677 other followers

July 2014
« Jun   Aug »
Mallikarjun Gunda

This is Mallikarjun Gunda, I am working as a software professional. Blogging is my Passion. This blog contains the posts on Java related technologies and programming languages. I am happy to share my knowledge through the blogs.

Blog Stats
  • 311,892 hits