Create a Modal Window Login Form Effect Using jQuery

by on 3rd June 2013 with No Comments

featured preview login modal window jquery plugin tutorial

The hidden modal window technique is a great solution for dealing with interface elements which are not particularly necessary on the page. Social networks can use modal windows for private messages and forms which are only being used by members of the site. This is also true for blogs and magazines which have an author login page separate from the main website. Modal windows are much easier than creating new windows in JavaScript because everything is displayed in the same window using HTML markup already on the page.

I want to demonstrate how we can build a custom modal window based off the jQuery plugin leanModal. The plugin is completely open source & free to use under the MIT general license. I like this plugin more than others because it just gives us the “bare basics” without too much customization. This leaves room to update the modal window via CSS and still utilize some extra parameters in jQuery.

Live DemoDownload Source Code

Getting Started

First I have created two files named “index.html” and “style.css” which hold all the demo code. Inside this same directory I’ve created another folder named /js/ which will hold two documents. First is the latest mini jQuery library and second is the leanModal plugin file named jquery.leanModal.min.js.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Modal Login Window Demo</title>
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="style.css">
  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/jquery.leanModal.min.js"></script>
  <!-- jQuery plugin leanModal under MIT License http://leanmodal.finelysliced.com.au/ -->
</head>

Now it may come as a surprise to learn that we do not need to include any default CSS stylesheet! This is because our leanModal plugin only provides very basic JS functions, everything else is slimmed down to provide a bare template. However we do need to copy over one block of CSS which implements the dark overlay effect. This is copied directly from the plugin website which I added into my default stylesheet.

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

The overlay area will appear at 100% width and height on top of the page. Then jQuery will add the targeted modal div to appear on top of everything else in the HTML. Noticeably my body content is fairly empty, the only important element is the toggle button for displaying this modal window. But let’s take a peek inside the HTML form encapsulated within the #loginmodal div.

  <div id="loginmodal" style="display:none;">
    <h1>User Login</h1>
    <form id="loginform" name="loginform" method="post" action="index.html">
      <label for="username">Username:</label>
      <input type="text" name="username" id="username" class="txtfield" tabindex="1">
      
      <label for="password">Password:</label>
      <input type="password" name="password" id="password" class="txtfield" tabindex="2">
      
      <div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
    </form>
  </div>

Note I have included display:none; as a single inline CSS property. We need to force this div to have no display so then leanModal() can make it fade into the page and display as a block element. I am using a very simple form display with similar styles as this CSS checkout form. The light blue design works well in contrast to the darker shadow overlay, plus we can utilize CSS3 transition effects onto the input fields.

One other crucial page element is the submit button. Since this form will not send any data to the server, we just want to hide the modal window once the user submits. I have added the class .hidemodal which we can setup inside the jQuery method. It will stop the default form submission and displays this modal window as a purely aesthetic effect.

CSS Layout Styles

My CSS document contains all the typical page resets we need, along with some of the typography and button styles. The centered login modal window contains a new button style mimicking the other flat design. But thankfully there are not too many unique CSS properties which require a further explanation. You should be able to construct your own modal window styles without much of a hassle.

/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** custom login button **/
.flatbtn-blu { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  outline: 0;
  border: 0;
  color: #edf4f9;
  text-decoration: none;
  background-color: #4f94cf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  font-size: 1.3em;
  font-weight: bold;
  padding: 12px 26px 12px 26px;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.flatbtn-blu:hover {
  color: #fff;
  background-color: #519dde;
}
.flatbtn-blu:active {
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}

I think the key elements to recognize are the containers for the overlay effect and the modal window. I have moved these down to the bottom of the stylesheet, grouped with all the other modal window properties. I have limited the modal window to a 300px width since this example only requires a form with 2 inputs. But remember that leanModal does not force any default styles onto your window, so the design is 100% in your hands.

/** modal window styles **/
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#loginmodal {
  width: 300px;
  padding: 15px 20px;
  background: #f3f6fa;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

#loginform { /* no default styles */ }

#loginform label { display: block; font-size: 1.1em; font-weight: bold; color: #7c8291; margin-bottom: 3px; }

.txtfield { 
  display: block;
  width: 100%;
  padding: 6px 5px;
  margin-bottom: 15px;
  font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif;
  color: #7988a3;
  font-size: 1.4em;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#edf3f9), to(#fff));
  background-image: -webkit-linear-gradient(top, #edf3f9, #fff);
  background-image: -moz-linear-gradient(top, #edf3f9, #fff);
  background-image: -ms-linear-gradient(top, #edf3f9, #fff);
  background-image: -o-linear-gradient(top, #edf3f9, #fff);
  background-image: linear-gradient(top, #edf3f9, #fff);
  border: 1px solid;
  border-color: #abbce8 #c3cae0 #b9c8ef;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.txtfield:focus {
  outline: none;
  color: #525864;
  border-color: #84c0ee;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
}

Each of the text fields has a transition animation effect on the border and box shadows. Also the text color will fade as you tab between the two inputs. I chose a lighter blue color scheme and matched the button effects to the input fields. There are a lot of CSS3 properties along with their vendor prefixes, so this form is geared more towards newer rendering engines. But it should display properly in all major browsers.

Modal Effect in jQuery

Unfortunately CSS3 is not at a point where we can rely on its ability to hide/show different windows on a click event. And there is no guarantee this will ever be a possibility, either. When it comes to modal windows using a shadowbox effect it will be much easier to stick with JavaScript. Thankfully the leanModal plugin only needs a single line of JS to activate. I have added the following block of code right before my closing </body> tag.

$(function(){
  $('#loginform').submit(function(e){
    return false;
  });

The first small block of code will check whenever the user presses “Log in” and attempts to submit the form. We are using the JavaScript keywords return false to stop the event before it even triggers. You can read more about this method on Stack Overflow. Now the last line of code is all we actually need to get the modal window working.

  $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});

If we do not need to customize any parameters then just the line $(‘#modaltrigger’).leanModal() should work great. However for this demo I want to showcase the 3 optional variables you can pass into the function. First we add the offset value from the top of the window to position this new modal box. Then a value from 0.0-1.0 is used to mark the background opacity level.

And then finally we can attach a new jQuery selector for the close button. This may be a class or an ID, or some mix including HTML attribute selectors. For my example we are using the same class which I added onto the login button .hidemodal. This way the modal window should hide every time you press the submit button.

To get the form actually working you will need to remove this class from the button, and remove the block of JavaScript code before the leanModal() function. Then the form will submit properly and should redirect the user to a new page. But you should try out a lot of different ideas and see what types of content may work well inside a modal display.

css jquery modal window login form tutorial

Live DemoDownload Source Code

Final Thoughts

The modal window effect can be used in far more situations than just login forms. You have to think about various UI elements of a webpage and consider which elements may be more useful in their own window. This pertains to special forms or longer detailed content which is not going to be acknowledged by every visitor.

Please do check out my live sample demo and see how we can implement this leanModal jQuery effect using standard HTML blocks. Anybody with some basic understanding of CSS should have no problem customizing my default styles. There are so many uses for this functionality that it is best left up to the imagination. But I do hope these sample tutorial codes may provide a base template for developers who are looking to save time on their next project.

Comments & Discussion

Subscribe

Membership
About the Author