The Definitive Modal Layer

For the last couple of years we’ve been using modal layers where it made sense, basically most places where we would’ve used pop-ups in the old days, i.e. modal layer is to Web 2.0 what the pop-up was previously. But all the while I never felt like I was able able to lock down any solid way of doing this. Every time the issue came up I’d re-visit the functionality, never overjoyed with my latest implementation, so I never came up with a final solution. Depending on the website I was working with and the libraries they were already using I’d sometimes use Prototype or YUI, or if it was a good fit I’d implement a pre-built lightbox gallery, or even just code up something quick and simple from scratch.

And it’s not just me, I’ve noticed throughout the web bad implementations of this technology. I won’t get specific with names but I’ve seen some funky stuff even on well-known popular sites when it comes to the modal layer. Typical issues I’ll see is where the grayed out background doesn’t fill the whole screen, or it fills too much of the screen and triggers scrollbars, or if the page is really long you can still scroll and the modal layer isn’t sticky and you can lose where it’s at.

So the solution sort of hit me when I was having trouble graying out the background – when calculating the width some browsers include the vertical scrollbar in the result where as other browsers don’t, so in some cases it was overflowing and actualy creating a horizontal scrollbar.  This is not surprising as we have made a career out of fighting the various browser discrepancies and it would be normal to have multiple javascript conditions to query the user agent and modify the width accordingly.  But as I started to write those conditionals I watched my nice simple code quickly get complex and it suddenly hit me – why have the horizontal scrollbar at all?  Really it was that simple.  Good UI design dictates that if the modal content is bigger than the screen space available then a modal box is not the right approach, at which point the content does in fact require its own page (or dare I say a popup), or in cases where it is acceptable for the modal content to be bigger than the screen space available then the modal box itself should have the scrollbars.  So why even have it?  There’s no reason, and I would even go as far as saying that if there is no reason for having it then it is better UI design to actually remove it.

Okay so here’s the code, I used jQuery but it would be simple to convert it to any library or even make it stand alone:

//Create Modal Layer
modalLayer = document.createElement("div");
modalLayer.setAttribute("id","modalLayer");
var cssObj = {
	'background' : 'url(img/gray_opacity_80_percent.png)',
	'height' : '100%',
	'width' : '100%',
	'margin' : '0 auto',
	'padding-top' : '25px',
	'text-align' : 'center',
	'position' : 'absolute',
	'top' : '0px',
	'left' : '0px',
	'z-index' : '1000',
	'display' : 'none'
}
$(modalLayer).css(cssObj);
modalLayer.innerHTML="<div id='modalBox'>Modal Content</div>";
$("#page").after(modalLayer); //insert after a valid page object

function showModalLayer(){
	$('body').css('overflow','hidden'); //disable browser scrollbars
	$("#modalLayer").css("top",$('body').scrollTop()); //move modal layer to scroll position
	$("#modalLayer").css("display","block"); //display modal layer
}

function hideModalLayer(){
	$('body').css("overflow","visible"); //enable browser scrollbars
	$("#modalLayer").css("display","none"); //hide modal layer
}

An example of where I’ve used this code is on the CCS donation page, but it’s not that great of an example because the page content isn’t long enough to trigger scrollbars.