Modal windows are most commonly described as anything that captures the user’s attention, and doesn’t allow them to return to the previous state until they interact with the object in question.

Now, that is a bit convoluted and I think it is better addressed with a few examples of websites that use the technique really well. One of those is Build It With Me which does it really well. If you head on over to their site and click on Sign Up, you will see a very literal example of when a modal box just works.

Often times when working with modals they are used to clean up user interfaces and try to enhance the user’s experience—but it is important to remember that sometimes they do the exact opposite. Consider annoying websites with too many JavaScript popups, or spam sites that actually confirm that you want to leave the site. That is ridiculous, and sites that do these things are absolutely a no-go, so make sure you know how to use modal dialogues before going forward with the implementation.

To give you a better example of how to do them right, we will talk theory—then afterwards we will get into examples to show you how to implement them into responsive design. So let’s jump right into some theory.

Modal theory

The basic theory of the user interface element for modals can be rather intertwined with other UI theorems that we will only tangentially touch on here. Basically, what we are looking at is a necessity that we have where we need a user to click on a specific section of the site, and to focus particularly on only that section until the completion of the task that section offers.

Now, this could be used for many different things such as user logins, form elements, download pages, or it could be to simply display a photo and look at that photo’s comments. Facebook uses this to help you focus on interaction when you click on a photo, but of course they allow you to cycle through the photos there as well. You can click on them, and then it takes away all the ability to interact with the main page until you either click outside of the modal box or click the “x” to return.

Basic modal theory though is very interesting, and really relies on those principles we just touched on. Let’s walk through a use-case so you can get a better idea of when and why to use one.

Let’s say that you run a website where the users can register and login to their storage that they have rented from you (online storage). Well, you as a company are pretty incredibly reliant on those users having a great flow from landing on your homepage to logging in. As that is one of the most important things your site offers, you would want the user to feel compelled to login and actually make it incredibly easy for them to do so.

Due to that you may have a large sign in link on your homepage, or an actual section for them to do so on the homepage, perhaps in the header. Though the problem with those are, that in the latter case, the user isn’t pointed to the login in anyway, and in the former the user isn’t compelled to make a decision.

Now, I don’t condone forcing users to do anything but gently nudging them is perfectly fine—and that is what I meant by ‘compelled’. So what you could do is a have a login link that pulls down a modal window with the login form right there on it. That way they never have to navigate away from the homepage and then navigate back (via the example we stated a moment ago), and they also are 100% aware of what they are supposed to do inside of the modal.

It is a very nice way to go about helping users understand what is happening and why it is happening. I have to say, I have used it myself for clients and the retention rate from homepage landing to login has increased by 35% in the past that I have seen. And those certainly aren’t numbers to shake a stick at; they are really valuable and clearly defined metrics on how much a simple modal window can increase retention and decrease bounce rate.

Coding a basic modal window

Let’s dive right into some code, but for now disregard what sort of modal type we are going to use and all the technicalities, and let’s just focus on the core basics. The HTML, the CSS, and the jQuery (which is a bit of how, but we will get into that later) is what we are going to focus on for now. You can see a demonstration of the finished product here.

The HTML Elements

First of all we are going to want to code up our modal div’s, and the link so that we can call it and get it to show up on screen when the user clicks. Again, the links are going to be what points anyone who clicks to our modal (upon said click) and the divs will be the base of the modal window for both the jQuery and CSS to interact with.

The link is going to look like this:

<a href="#dialog" name="modal">Simple Window Modal</a>

The reason it has a name attribute is because that is an element we are going to be using to call from our jQuery, so that we can call individual links and not all the links on our site.

Now for the div, and content inside of our modal. This could easily be a login form, or anything really—but for now I just have a simple text area and a link to close it.

<div id="box">

<div id="dialog" class="window">
Modal Window
<a href="#"class="close"/>Close</a>
</div>

<div id="mask"></div>
</div>

The reason we have a mask is so that we can toss in some nice usability and dim the entire screen when the modal gets called so that it helps the user focus on whatever content is inside of the modal, until they decide to leave. And then we close the div. The class being set to close is another attribute we are going to call from our jQuery, but let’s leave that be for now.

Lastly we toss in a jQuery link into the head section of our HTML document so that we can render the latest jquery pack, because after all this code down below is based on jQuery.

<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"><!--mce:0--></script>

What we are doing here so far probably means very little to the onlooker, but the HTML actually houses the information we want the user to see once a modal is activated, so it is rather important. It could be a form element, or a link, or a series of links, or a list, or pretty much anything—but to simplify things I have included only some text.

Again, what is going on is we are giving a name for the modal (in the form of a div ID) so that we can at a later point call that ID and tell it to display on the screen. That is pretty much it. We are using a sub-div though so that we actually have content that is visible. The first div calls the window, the second div displays the content.

The CSS elements

When working with CSS in modals the most important thing to remember is that you only want the text inside your modal to display upon a user interaction. So you don’t want it to show up on the page until the user has done something to initiate it. So the CSS we are going to use is going to hide the content until it is displayed via our jQuery and then render the text inside the child div. Let’s dive in and talk about what is going on in detail, afterwards.

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}

#box .window {
  position:fixed;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#box #dialog {
  width:375px;
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

The “mask” section is probably the most interesting. Here we are setting an absolute positioning on the entire screen so it masks the whole monitor in black when the dialog model comes up. The z-index is set so that we are forced to interact with it no matter where we scroll on the page. Then I just set a simple padding so that we can have some bumper actions because we are using responsive jQuery to set this.

The #box.window is setting the visibility to anything in the child div below it to hidden—so that is why it isn’t available to be seen until we allow it. The width and height are set, and the display is set to none—this way people can’t interact outside of the box until they interact within it, which is a pretty common feature of a dialogue box.

The absolute position is telling the modal where to go, no matter what, on any screen that displays it (before being resized, which we will talk about later). Then we use a z-index so that no matter how they scroll on the page they see that viewable element only. The overall system is rather fool-proof and is a systematic way of making sure a user does indeed interact with our element. Then again, though, this is why it is so important to only use these sorts of things when you feel they are absolutely appropriate.

The #dialog child div of #box is simply setting the system up for the content inside of it. So in this case we are using a white background, because we have set the mask div to be black once the background kicks in. This is a pretty simple bit, and it is pretty self-explanatory.

Now that we have that all set up, let’s hop on down to the jQuery and see what actually makes this modal work, and why.

The jQuery elements

Let’s dive right in, except this time we will be using comments within the code to explain it as we go, and keep in mind – this is where the responsive modal comes into play. This is certainly where the magic happens, so to speak.

$(document).ready(function() {	

//select all of the "a" tags with name equal to modal, so that we can differentiate between normal links and links that we want to activate a modal

$('a[name=modal]').click(function(e) {
//Cancel the default link behavior
e.preventDefault();

//Grab the "a" tag
var id = $(this).attr('href');

//Grab the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect. This gives our modal window a nice blurred background and has a nice transition on it, so that it isn't so choppy.
$('#mask').fadeIn(1000);
$('#mask').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();

$('#mask').hide();
$('.window').hide();
});		

//if mask is clicked
$('#mask').click(function () {
	$(this).hide();
	$('.window').hide();
});			

$(window).resize(function () {
	var box = $('#box.window');

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
box.css('top',  winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);
});
});

This code seems quite complex, and it actually rather is—but at the same time it is only one way to do this. That is what is interesting about JavaScript/jQuery programming in general: they often have different ways to do the exact same thing. This is a statement towards how complex and complete the language of JavaScript actually is.

There are a lot of other ways to do this, so please if you’d like to represent your way please do so in the comments I’d love to talk about it with you. I mean, heck, you could even do this in all CSS3—but we won’t get into that now as it isn’t yet as widely supported as jQuery is.

Doing it the way we are doing it here gives us a ton more control over the final product and a lot of functionality built in, as well as some usability and design parts that are really important. For instance, we are getting the fade to black and transitional overlay for the modal window, and we are also getting the ability to close the modal window—which we wouldn’t get if we did a super simple function to show this process. Also the responsive element is what is really important here, in my opinion.

Go ahead and toss all this code into an HTML page and then re-size it. Wrap the CSS in tags, and the jQuery in <script> tags in the head then toss the HTML in the body—and you are all set. Re-size the page after doing all that and you will see that the modal actually changes locations based on how big the page is, and it tries to stay roughly centered. So if you were on a Macbook Air with it’s 13 or 11inch screen’s it’d look very similar to if you were on a 27inch iMac.

I hope that helped you get a better understanding of Modal Windows, and their best usages. Remember to not overdo it, and to use it as a way to enhance rather than necessitate and you will be just fine. They are a beautiful tool, and one that many sites you probably never even realized employ for almost everything. So go ahead and buckle down, and learn some JavaScript to reproduce this great effect! I mean, there couldn’t be a better time. What are you waiting for?

Dain Miller is a freelance web designer and developer based out of Madison Wisconsin. He is mainly focused on building products in the online education space, and he has a passion for responsive design. You can follow him on twitter at @_dain.

What are the best examples of modal windows you’ve seen? What’s your favorite technique for creating them? Let us know in the comments!

The Photoshop Styles Bundle (over 400+ styles) – only $25!

Source