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”);
}#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
</> MV Techbytes 