«
»

A Simple Modal Window Using CSS And JQuery

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();
#     });
#
# });
#

, ,


  1. #1 by Greg - September 9th, 2009 at 10:10

    This creates scrollbars when they aren’t even needed in IE8.

    Reply Quote

  2. #2 by Sujith - January 11th, 2010 at 21:47

    Hi,

    JQuery script is not executed on mozilla,opera,and Chrome?How can i solve that? Pls help me……………………..

    Reply Quote

  3. #3 by Tom - March 24th, 2011 at 01:37

    @Sujith
    Did you include the jquery file that could be the problem since it works fine for me.

    Reply Quote

  4. #4 by Vicky - September 17th, 2011 at 11:17

    Incomplete code. DOES NOT WORK. There is no div #hide mentioned. Moreover the code used in the DEMO is completely different from the tutorial. I wonder WHY PEOPLE write incomplete tutorials and waste time of others.

    Reply Quote

  5. #5 by bilal - October 22nd, 2011 at 02:57

    this is a complet code for the demo

    code html

    Model Box Demo

    Post Your idea about this blog.
    Close

    Title

    Your Idea

    Tags

    Click Here For Demo

    code css

    #mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:black;
    display:none;
    }
    #maincontaner{
    position:fixed;
    float:left;
    width:410px;
    height:auto;
    margin:100px 0 0 250px;
    background-color:#FFFFFF;
    padding:5px 2px 8px 5px;
    z-index:99999;
    }

    .projectstrip{
    background-repeat:no-repeat;
    width:400px;
    height:54px;
    float:left;
    font-family:’Trebuchet MS’, Verdana, Arial, Sans-Serif;
    font-size:18px;
    color:#000000;
    padding:15px 0 0 20px;
    }

    .projectstrip img{padding-left:100px;}
    #start_emb {position:absolute; z-index:9999; display:none;}
    #post{
    border: solid 1px #b2b2b2;
    width:400px;
    height:300px;
    background-color:#FFFFFF;
    background-repeat:no-repeat;
    margin-left:5px;
    }
    .post_filed{
    float:left;
    padding:20px 0 0 50px;
    font-family:Arial, Helvetica, sans-serif;
    color:#000000;
    font-size:13px;
    font-weight:900;
    }
    .post_filed .textfiled{
    border:solid 1px #c7c29e;
    width:271px;
    height:25px;
    background-color:#f4eebe;
    margin:5px 0 5px 0;
    }
    .post_filed .textarea{
    border:solid 1px #c7c29e;
    width:271px;
    height:82px;
    background-color:#f4eebe;
    margin:5px 0 5px 0;
    }

    .startembarkonbutton{width:164px; padding-left:30px;}
    .rightpannel{
    width:230px;
    font-size:12px;
    color:#545454;
    float:left;
    padding:60px 0 0 20px;
    }
    .rightpannel .txt{
    padding-top:8px;
    color:#767676;
    }
    .rightpannel strong{
    color:#000000;
    font-size:13px;
    font-weight:bold;
    padding-top:30px;
    }

    .rightpannel .box{
    width:230px;
    height:89px;
    background-repeat:no-repeat;
    }
    .rightpannel .box img{
    margin:10px;
    float:left;
    }
    #tagbox{
    width:230px;
    height:auto;
    }
    #tagbox .topimg{
    background-repeat:no-repeat;
    background-position:top;
    height:14px;
    }
    #tagbox .midbg{
    width:230px;
    background-repeat:repeat-y;
    padding: 0 5px 0 5px;
    }
    #tagbox .midbg ul{
    list-style:none;
    }
    #tagbox .midbg ul li{
    margin:0 5px 0 5px;
    width:auto;
    float:left;
    }

    #tagbox .midbg ul li a:link {color:#868383; font-weight: normal;}
    #tagbox .midbg ul li a:visited {color:#868383; text-decoration: none;}
    #tagbox .midbg ul li a:active {color:#868383; text-decoration: none;}
    #tagbox .midbg ul li a:hover {color:#868383; text-decoration: none;border: solid 0px #CCCCCC; background-color:#e2e2e2;}

    #tagbox .midbg ul li .active a:link {color:#868383; font-weight: normal; border: solid 1px #CCCCCC; background-color:#e2e2e2;}
    #tagbox .midbg ul li .active a:visited {color:#868383; text-decoration: none;border: solid 1px #CCCCCC; background-color:#e2e2e2;}
    #tagbox .midbg ul li .active a:active {color:#868383; text-decoration: none;border: solid 1px #CCCCCC; background-color:#e2e2e2;}
    #tagbox .midbg ul li .active a:hover {color:#868383; text-decoration: none;border: solid 1px #CCCCCC; background-color:#e2e2e2;}

    #tagbox .bottomimg{
    background-repeat:no-repeat;
    background-position:top;
    height:14px;
    }

    .clear{clear:both;}

    #autocomplete {
    position: absolute;
    border: 1px solid;
    overflow: hidden;
    z-index: 100;
    }
    #autocomplete ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #autocomplete li {
    border:solid 1px #c7c29e;
    background-color:#f4eebe;
    white-space: pre;
    cursor: default;
    font-size:12px;
    }
    #autocomplete li.selected {
    background: #f4eebe;
    color:#f4eebe;
    }

    html.js input.form-autocomplete {
    background-repeat: no-repeat;
    background-position: 100% 2px; /* LTR */
    }
    html.js input.throbbing {
    background-position: 100% -18px; /* LTR */
    }
    #cls { float:right; margin-right:10px;}

    code js

    $(document).ready(function(){
    $(“#start_emb”).hide();
    $(“#create”).click(function(){
    $(“#start_emb”).slideToggle(“slow”);

    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    $(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight,backgroundColor:”black”});

    $(‘#mask’).fadeIn(1000);
    $(‘#mask’).fadeTo(“slow”,0.8);

    $(‘#post_title’).val(”) ;
    $(‘#summary_description’).val(”) ;
    $(‘#tags2′).val(”) ;

    $(“#t_error”).html(“”);
    $(“#d_error”).html(“”);
    $(“#tg_error”).html(“”);
    });

    $(“#cls”).click(function(){
    $(‘#mask’).hide();
    $(“#start_emb”).hide(“slow”);
    });

    $(‘#add_tag_btn’).click(function(){
    var title_r = $(‘#post_title’).val();
    var desc_r = $(‘#summary_description’).val();
    var tag_r = $(‘#tags2′).val();

    var title = $.trim(title_r);
    var desc = $.trim(desc_r);
    var tag_r = $.trim(tag_r);
    var login =”Login”;
    var start =”start”;

    if (title != ” && desc!=” && tag_r!=” ) {
    $(‘#t_error’).hide();
    $(‘#d_error’).hide();
    $(‘#tg_error’).hide();
    } else {
    if(title==”){
    $(‘#t_error’).show();
    $(“#t_error”).html(“(Not Empty.)”);
    }
    if(desc==”){
    $(‘#d_error’).show();
    $(“#d_error”).html(“(Not Empty.)”);
    }
    if(tag_r==”){
    $(‘#tg_error’).show();
    $(“#tg_error”).html(“(Not Empty.)”);
    }
    }
    });

    });

    good luck

    Reply Quote

  6. #6 by Jeff - November 12th, 2011 at 03:20

    How do you hide the scrollbars in IE? If you add overflow hidden, the modal does not cover the entire page and overflow visible does not do anything.

    Reply Quote
(will not be published)

 


Submit Comment
Subscribe to comments feed
  1. No trackbacks yet.