Example HTML File to display Overlay using JQuery


<html>
<head>
<title>Sample Overlay Test</title>
<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>

<style type=”text/css”>
#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;
}
</style>

<script type=”text/javascript”>
$(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());
}
});
});
});
</script>
</head>

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

</div>
</div>
</body>
</html>

 

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
One comment on “Example HTML File to display Overlay using JQuery
  1. […] Click Here to get the complete Sample html file. […]

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
  • 287,766 hits
IndiBlogger
malliktalksjava.wordpress.c...
70/100
%d bloggers like this: