jQuery Modal Window
If you want to develop user-friendly apps and plugins for your WordPress blog website, you need to use jQuery. To date it is one of the best scripts that so many web designers and web developers swear by.
Below is a simple tutorial by Queness.com that might be very useful in your site promotion. This will let you show a modal window and display content of DIV #ID.
HTML code and A tag attributes
<!- #dialog is the id of a DIV defined in the code below ->
<a href=”#dialog” name=”modal”>Simple Modal Window</a>
<div id=”boxes”>
<!- #customize your modal window here ->
<div id=”dialog”>
<b>Testing of Modal Window</b> |
<!- close button is defined as close class ->
<a href=”#”>Close it</a>
</div>
<!- Do not remove div#mask, because you’ll need it to fill the whole screen ->
<div id=”mask”></div>
</div>
CSS code
<style>
/* Z-index of #mask must lower than #boxes .window */
#mask {
position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
width:375px;
height:203px;
}
</style>
Javascript
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$(‘a[name=modal]‘).click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr(‘href’);
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});
//transition effect
$(‘#mask’).fadeIn(1000);
$(‘#mask’).fadeTo(“slow”,0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css(‘top’, winH/2-$(id).height()/2);
$(id).css(‘left’, winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$(‘.window .close’).click(function (e) {
//Cancel the link behavior
e.preventDefault();
$(‘#mask, .window’).hide();
});
//if mask is clicked
$(‘#mask’).click(function () {
$(this).hide();
$(‘.window’).hide();
});
});
</script>
Launching the modal window with JS
$(document).ready(function () {
//id is the ID for the DIV you want to display it as modal window
launchWindow(id);
});
- If you want to close the modal window by pressing any key, you can add these functions:
$(document).keyup(function(e) {
if(e.keyCode == 13) {
$(‘#mask’).hide();
$(‘.window’).hide();
}
});
This simple tutorial can make a big difference in your website, and you can also customize this according to the web developer and display it in your image gallery and in iFrame.
Check the demo of this tutorial HERE.
0
511
