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.

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.

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.

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.

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.

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 tag.

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.

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.

For more related resources: