Modal Dialogs without JavaScript

Modal Login Dialog Sample

View Live Demo Here

There are a LOT of things I see people wasting JavaScript on these days that to be frank, you just don't need scripting for anymore. One of these is a modal dialog. Some people will waste jQuery on it, others will blow an entire lightbox style script on ONE lousy login box -- it's just craziness with CSS3 here. For browsers that don't support CSS3? just show it at the bottom of the page.

Implementing this in modern browsers is so easy... You just give it an ID and use :target to trigger the show/hide. Since you have a trigger you can even animate this. For this example let's do a full screen fade-in lightbox style modal of a login form.

HTML

<div id="loginModal">
	<form action="#">
		<fieldset>
			<a href="#" class="closeModal"></a>
			<label for="login_email">E-Mail Address:</label><br>
			<input type="mail" id="login_mail" name="mail"><br>
			<label for="login_password">Password:</label><br>
			<input type="password" id="login_password" name="password"><br>
			<button type="submit">Login</button>
			<a href="#">Forgot your password?</a>
		</fieldset>
	</form>
<!-- #loginModal --></div>

The above markup just gets put at the bottom of your page's code or wherever would make sense when CSS3 is unavailable. Wherever you want to trigger the modal, just make an anchor to it:

HTML

<a href="#loginModal">Login</a>

Then for CSS:

CSS


@media (min-width:1px) { /* sneaky trick targets modern browsers only */
	#loginModal {
		display:table;
		position:fixed;
		top:0;
		left:-999em;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.8);
		opacity:0;
		transition:left 0s 0.3s, opacity 0.3s;
	}
	#loginModal:target {
		left:0;
		opacity:1;
		transition:left 0s, opacity 0.3s;
	}
	#loginModal form {
		display:table-cell;
		text-align:center;
		vertical-align:middle;
		height:100%;
	}
	#loginModal fieldset {
		position:relative;
		display:inline-block;
		text-align:left;
	}
	.closeModal {
		position:absolute;
		top:-0.75em;
		right:-0.75em;
		width:1.5em;
		height:1.5em;
		line-height:1.4em;
		text-align:center;
		text-decoration:none;
		color:#FFF;
		background:#C00;
	}
	.closeModal:before {
		content:"x";
	}
}

Adjusting the style as desired... The real magic is that it's position:fixed but off the screen at zero opacity. When it becomes :target thanks to the href="#loginModal" we slide it into position on the screen and set the opacity to one. The transition is pretty simple -- when making it appear we want zero transition for the left positioning and 0.3s for the opactiy fade-in. To disappear we want a 0s transition with a 0.3s delay for left, so we put that on the element's default state. That too gets the 0.3s opacity transition as it fades out. Again, not exactly rocket science and certainly not something we should be wasting JavaScript on doing!

You can see a live demo of this here:

Modal Dialog Login Form Demo

As with all my examples the directory:

/demos/modalDialogs

Is wide open for easy access to the gooey bits and pieces. It's not rocket science.

... and look, a modal dialog that even has a animated fade-in and fade-out a thousand times cleaner and smoother than any scripttardery could ever hope to achieve. This is what I mean by people using JavaScript for NOTHING in 2017!

... and again, older browsers that can't handle CSS 3's :target, just put the form where it would make sense or be out of the way, and let the anchor do its natural behavior of scrolling to it!

Side note, if you don't like that it fills up the history, THEN you could assist it slightly with a handful of scripting to change the location without pushing the history on the stack. I would do so in a manner where it would still work scripting off by hooking the existing markup. Really though, I don't consider that worth the code or effort. If nothing else, the fact that you can hit "back" instead of the close is pretty neat!

Projects

  • elementals.js
    A lightweight JavaScript library focusing on cross browser support, ECMAScript polyfills, and DOM manipulation.
  • eFlipper.js
    An image carousel script using elementals.js
  • eProgress.js
    A JavaScript controllable progress bar using elementals.js. Based on the nProgress project that relies on the much heavier jQuery library.

/for_others

Browse code samples of people I've helped on various forums. These code snippets, images, and full rewrites of websites date back a decade or more, and are organized by the forum username of who I was helping. You'll find all sorts of oddball bits and pieces in here. You find any of it useful, go ahead, pick up the ball, and run with it.