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>
<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

 

Advertisements
About

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 678 other followers

Calendar
July 2014
M T W T F S S
« Jun   Aug »
 123456
78910111213
14151617181920
21222324252627
28293031  
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
  • 281,102 hits
IndiBlogger
malliktalksjava.wordpress.c...
70/100