Posts Tagged Thickbox

A Simple Modal Window Using CSS And JQuery

Posted by admin in CSS, HTML, JavaScript, jQuery on May 24th, 2009

Simple Modal Window Using CSS and jQuery

Simple Modal Window Using CSS and jQuery


In this tutorial, I’m going to share how to create a simple attractive light weight modal window with jQuery and CSS. I like jQuery, because it makes everything so simple and so easy.

You can view the working demo here.

Right, let’s start, this example will show you how to create a modal window that will display the content of a DIV using its #ID.

For jQuery, please include jQuery file in your page where you want to use this model window.

1. HTML code 

# <!-- #dialog is the id of a DIV defined in the code below -->
# <a name="modalwindow" href="#open">Open</a>
#
<div>
#
#     <!--You easily customize your window here -->
#
<div class="window">
#         <strong>Testing of Modal Window</strong> |
#
#         <!-- close button is defined as close window -->
#         <a class="close" href="#">Close window</a>
#
#</div>
#
#     <!-- Do not remove div#hide, because you shall need it to fill the whole screen -->
#
#</div>

2. CSS code

 
# /* Z-index of #hide must lower than #container .window */
# #hide {
#   position:absolute;
#   z-index:9000;
#   background-color:#000;
#   display:none;
# }
#
# #container .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 */
# #container #openbox {
#   width:375px;
#   height:203px;
# }

3. Jquery code

# $(document).ready(function() {
#
#     //select all the a tag with name equal to modalwindow
#     $('a[name=modalwindow]').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 hideHeight = $(document).height();
#         var hideWidth = $(window).width();
#
#         //Set heigth and width to hide to fill up the whole screen
#         $('#hide').css({'width':hideWidth,'height':hideHeight});
#
#         //transition effect
#         $('#hide').fadeIn(1000);
#         $('#hide').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();
#         $('#hide, .window').hide();
#     });
#
#     //if hide is clicked
#     $('#hide').click(function () {
#         $(this).hide();
#         $('.window').hide();
#     });
#
# });
#

, ,

7 Comments