Login Box Modal Dialog Window with CSS and jQuery

Hello guys, in this tutorial will introduce how to create a simple modal dialog window with jQuery by using of a login box. This tutorial requires intermediate knowledge of CSS and jQuery. For best results, please be sure to learn the basic of JQuery.

VIEW DEMO

HTML

The markup is simple and also very versatile, in addition to make a login box, you can create content that is displayed only by clicking the link, use this tutorial to release all your creativity.

<a href="#login-box" class="login-window">Login / Sign In</a>

Now create a contact form and add the close button

<div id="login-box" class="login-popup">
        <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
          <form method="post" class="signin" action="#">
                <fieldset class="textbox">
             <label class="username">
                <span>Username or email</span>
                <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
                </label>
                <label class="password">
                <span>Password</span>
                <input id="password" name="password" value="" type="password" placeholder="Password">
                </label>
                <button class="submit button" type="button">Sign in</button>
                <p>
                <a class="forgot" href="#">Forgot your password?</a>
                </p>        
                </fieldset>
          </form>
</div>

CSS

The CSS might be a bit more complicated, but look you have any comments you explain in more detail this process. In this example i used the CSS3 rules.

/* Mask for background, by default is not display */
#mask {
 display: none;
 background: #000; 
 position: fixed; left: 0; top: 0; 
 z-index: 10;
 width: 100%; height: 100%;
 opacity: 0.8;
 z-index: 999;
}

/* You can customize to your needs  */
.login-popup{
 display:none;
 background: #333;
 padding: 10px;  
 border: 2px solid #ddd;
 float: left;
 font-size: 1.2em;
 position: fixed;
 top: 50%; left: 50%;
 z-index: 99999;
 box-shadow: 0px 0px 20px #999; /* CSS3 */
        -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
        -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
 border-radius:3px 3px 3px 3px;
        -moz-border-radius: 3px; /* Firefox */
        -webkit-border-radius: 3px; /* Safari, Chrome */
}

img.btn_close { Position the close button
 float: right; 
 margin: -28px -28px 0 0;
}

fieldset { 
 border:none; 
}

form.signin .textbox label { 
 display:block; 
 padding-bottom:7px; 
}

form.signin .textbox span { 
 display:block;
}

form.signin p, form.signin span { 
 color:#999; 
 font-size:11px; 
 line-height:18px;
} 

form.signin .textbox input { 
 background:#666666; 
 border-bottom:1px solid #333;
 border-left:1px solid #000;
 border-right:1px solid #333;
 border-top:1px solid #000;
 color:#fff; 
        border-radius: 3px 3px 3px 3px;
 -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
 font:13px Arial, Helvetica, sans-serif;
 padding:6px 6px 4px;
 width:200px;
}

form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000;  }

.button { 
 background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
 background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
 background:  -o-linear-gradient(top, #f3f3f3, #dddddd);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
 border-color:#000; 
 border-width:1px;
        border-radius:4px 4px 4px 4px;
 -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
 color:#333;
 cursor:pointer;
 display:inline-block;
 padding:6px 6px 4px;
 margin-top:10px;
 font:12px; 
 width:214px;
}
.button:hover { background:#ddd; }

jQuery

The first step is to call the jQuery file.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

Create a new script tag and insert the code.

$(document).ready(function() {
 $('a.login-window').click(function() {
  
                //Getting the variable's value from a link 
  var loginBox = $(this).attr('href');

  //Fade in the Popup
  $(loginBox).fadeIn(300);
  
  //Set the center alignment padding + border see css style
  var popMargTop = ($(loginBox).height() + 24) / 2; 
  var popMargLeft = ($(loginBox).width() + 24) / 2; 
  
  $(loginBox).css({ 
   'margin-top' : -popMargTop,
   'margin-left' : -popMargLeft
  });
  
  // Add the mask to body
  $('body').append('<div id="mask"></div>');
  $('#mask').fadeIn(300);
  
  return false;
 });
 
 // When clicking on the button close or the mask layer the popup closed
 $('a.close, #mask').live('click', function() { 
   $('#mask , .login-popup').fadeOut(300 , function() {
  $('#mask').remove();  
 }); 
 return false;
 });
});

The Logic

1. .append
   The .append() method inserts the specified content as the last child of each element in the jQuery collection. For more information see here .append()
2. .live()
   This method is a variation on the basic .bind() method for attaching event handlers to elements. The .live() method which will tell jQuery to bind any current and future references of "#login-box" to the click event. For more information see here .live()

VIEW DEMO