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” />
http://js/jquery.min.js
http://js/jquery-ui.min.js

 

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>
<div class=’overlay’>
<div id=’displayOverLayDiv’>

</div>
</div>

 

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”).height($(window).height());
$(“.overlay”).width($(window).width());
$(“.overlay”).fadeTo(1000, 0.4);
$(“#displayOverLayDiv”).dialog({
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) {
$(“#frame”).height($(this).height());
$(“#frame”).width($(this).width());
}
});
});
});

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

 

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.