<html>
<head>
<title>Sample Overlay Test</title>
<link href=”css/jquery-ui.min.css” rel=”stylesheet” type=”text/css” />
http://js/jquery.min.js
http://js/jquery-ui.min.js<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”);
}#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
</> MV Techbytes 
One thought on “Example HTML File to display Overlay using JQuery”