Pages

Friday, January 20, 2012

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.
login-box-modal-window

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()

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

http://www.queness.com/post/1696/create-a-beautiful-looking-custom-dialog-box-with-jquery-and-css3


Introduction

I've been working on a web application that requires intensive use of AJAX and Javascript. It has a fancy navigation menu (tab menu + lava lamp submenu), tab interface in sidebar, AJAX based calendar and schedule module, AJAX based registration and forgotten password...... it has heaps of scripts in it and it looks pretty good when they all work together.
This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of you as well. The reason I have this custom dialog box is due to the inconsistencies across different browsers. If you look at mac's firefox and windows' firefox, the dialog box is completely different!
One thing about this dialog box, it uses CSS3 drop shawdow and a completely CSS3 skined button. So, latest version of chrome, firefox and safari will have no problems with it, but for IE6 and 7, the script will work but the display of the dialog box will look plain, no rounded border, drop shadow and gradient (i think ie8 will work).
This is how it looks like:
jQuery Dialog box
This is how it looks like in IE:
jQuery Dialog boxThis is the html, basically #dialog-overlay is the dark background and #dialog-box is the message box. It's pretty straight forward and I reckon you can use javascript to append this into BODY as well.



<div id="dialog-overlay"></div>
<div id="dialog-box">
    <div class="dialog-content">
        <div id="dialog-message"></div>
        <a href="#" class="button">Close</a>
    </div>
</div>


This is the first time I use CSS3. CSS3 is a hot topic lately because safari, chrome, firefox and IE8 start supporting it. Some of the websites like twitter has been using CSS3 as well. The following is the CSS code and I have added comments in each of the section.

#dialog-overlay {
 
    /* set it to fill the whil screen */
    width:100%;
    height:100%;
     
    /* transparency for different browsers */
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    background:#000;
 
    /* make sure it appear behind the dialog box but above everything else */
    position:absolute;
    top:0; left:0;
    z-index:3000;
 
    /* hide it by default */
    display:none;
}
 
 
#dialog-box {
     
    /* css3 drop shadow */
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
     
    /* css3 border radius */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     
    background:#eee;
    /* styling of the dialog box, i have a fixed dimension for this demo */
    width:328px;
     
    /* make sure it has the highest z-index */
    position:absolute;
    z-index:5000;
 
    /* hide it by default */
    display:none;
}
 
#dialog-box .dialog-content {
    /* style the content */
    text-align:left;
    padding:10px;
    margin:13px;
    color:#666;
    font-family:arial;
    font-size:11px;
}
 
a.button {
    /* styles for button */
    margin:10px auto 0 auto;
    text-align:center;
    display: block;
    width:50px;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
     
    /* button color */
    background-color: #e33100;
     
    /* css3 implementation :) */
    /* rounded corner */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     
    /* drop shadow */
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     
    /* text shaow */
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
     
}
 
a.button:hover {
    background-color: #c33100
}
 
/* extra styling */
#dialog-box .dialog-content p {
    font-weight:700; margin:0;
}
 
#dialog-box .dialog-content ul {
    margin:10px 0 10px 20px;
    padding:0;
    height:50px;
}
Alright, I reference part of the javascript from jQuery modal window tutorial. I write a popup function for this dialog box so that it can be called easily.

$(document).ready(function () {
 
    // if user clicked on button, the overlay layer or the dialogbox, close the dialog 
    $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {    
        $('#dialog-overlay, #dialog-box').hide();      
        return false;
    });
     
    // if user resize the window, call the same function again
    // to make sure the overlay fills the screen and dialogbox aligned to center   
    $(window).resize(function () {
         
        //only do it if the dialog box is not hidden
        if (!$('#dialog-box').is(':hidden')) popup();      
    });
     
     
});
 
//Popup dialog
function popup(message) {
         
    // get the screen height and width 
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width();
     
    // calculate the values for center alignment
    var dialogTop =  (maskHeight/3) - ($('#dialog-box').height()); 
    var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
     
    // assign values to the overlay and dialog box
    $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
    $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
     
    // display the message
    $('#dialog-message').html(message);
             
}