Tutorial - Modal dialogs without JavaScript

Just thought I'd share my latest tutorial of something people do a lot on websites, but are constantly wasting JavaScript to do... You don't need no steenkin' JavaScript, or Jquery-UI, or any of the rest of that crap for something this simple.

http://www.cutcodedown.com/tutorial/modalDialogs

Oh noes, in IE9 you don't get the animated fade-in, and in IE8 it's static content on the page instead of a modal. NOTS THATZIES!!!

 

You always teach me some gems deathshadow. I've always used a similar technique but have never been able to make it fade both ways.

Is there anyway (maybe with javascript) to make it so it doesn't create a history entry every time you open it (but still allows you to deep link to)?

 

The big trick is, as always, NOT to use display:none; Not just for the classic problem that JAWS actually obeys it even though screen readers should have ZERO huffing business looking at your screen media style, but also because it can also cause styling issues.

The fade out being a classic example as you can't target display for a transition. But left? Oh we can target left -- so you just put a delay BEFORE the left move occurs on the mouse-out state, then have a zero length transition.

It's a slick trick and a damned handy one to know.

I mention that at the bottom of the main text, you could hook the applicable anchor(s) to use window.location.hash

If you change window.location.hash in JavaScript it doesn't go on the history.

You could also do it without JavaScript by using the same "abuse" of a checkbox I suggest for doing those hidden mobile menus:
http://www.cutcodedown.com/tutorial/mobileMenu

Instead of an anchor to launch the menu, you'd use a label:

<label for="loginShowHide">Show Modal</label>

Code (markup):

Before the DIV you want to show/hide you'd have the input[checkbox] and change the close anchor to a label as well.

<input type="checkbox" id="loginShowHide">
<div id="loginModal">
	<form action="#">
		<fieldset>
			<label for="loginShowHide" class="closeModal"></label>

Code (markup):

The CSS then becomes a simple matter of replacing

	#loginModal:target {

Code (markup):

With this instead:

	#loginShowHide:checked + #loginModal {

Code (markup):

The only drawback to that approach is that CSS off, you have a checkbox and label that don't do anything. This is a case where enhancing it with JavaScript might be the better option.

Using elementals.js the scripted approach would go something like:

(function() {

	function nonHistoryHash(e) {
		_.eventPrevent(e);
		window.location.hash = e.target.href.substring(
			e.target.href.indexOf('#') + 1
		);
	}

	function addNonHistoryHash(query, a) {
		if (a = _.queryAll(_d.body, query)) 
			for (var i = 0, j; j = a[i]; i++)
				_.eventAdd(j, 'click', nonHistoryHash);
	}

	addNonHistoryHash('a.loginButton');
	addNonHistoryHash('a.closeModal');
	
})();

Code (markup):

With the advantage of zero changes to how it is coded in the article, and it would still work scripting blocked/disabled/whatever.

 

Oh, and here's that same script in vanilla JavaScript:

(function() {

	function eventAdd(e, event, callback) {
		if (e.addEventListener) e.addEventListener(event, callback, false);
		else e.attachEvent('on' + event, callback);
	}

	function nonHistoryHash(e) {
		e = e || window.event;
		if (!e.target) e.target = e.srcElement;
		// this MAY be overkill... Oh, who are we kidding, it is!
		e.cancelBubble = true;
		e.returnValue = false;
		if (e.stopPropagation) e.stopPropagation();
		if (e.preventDefault) e.preventDefault();
		window.location.hash = e.target.href.substring(
			e.target.href.indexOf('#') + 1
		);
	}

	function addNonHistoryHash(className, a) {
		if (a = document.getElementsByClassName(className)) 
			for (var i = 0, j; j = a[i]; i++)
				eventAdd(j, 'click', nonHistoryHash);
	}

	addNonHistoryHash('loginButton');
	addNonHistoryHash('closeModal');
	
})();

Code (markup):

Though completely untested, may have a typo or two.

In both cases it may be better to target Event.currentTarget instead of Event.target, but you'd have to be sure to polyfill that for legacy IE. (elementals.js does so for you if you use its _.eventAdd method.)

 

Thanks for the reply. Yes i always used the checkbox method you mentioned in combination with a negative z-index (which actually causes problems I like left better). I never knew you could add transition-delay to a specific property I always thought it was all transitions as a whole. I end up with something that fades in then disappears instantly, good to finally solve this.

I'll play with the code you tested above soon. See you redid elementals, ill check that out was well

 

Yeah, if you long-form them out comma delimited you can assign each and every transition different delay and action times.... opening up the door to all sorts of crazy possibilities -- MOST of them telling JavaScript driven animations like jQuery's .fadeIn or .slideIn to go flush-off.

See eFlipper.js which basically uses JavaScript for nothing more than some class swaps.
http://www.elementalsjs.com/demos/eFlipper

The heavy lifting is done in the CSS -- if you can call that simple a set of style "heavy lifting"
http://www.elementalsjs.com/liveDemos/eFlipper.screen.css

Doesn't use any delayed transitions, but you could use them to do some interesting things if you wanted to add other animation styles to the mix. I just did a basic simple 9 as an example. Once you get how the class swapping works there are all sorts of possibilities.