1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Tutorial - Modal dialogs without JavaScript

Discussion in 'HTML & Website Design' started by deathshadow, Mar 2, 2017.

  1. #1
    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
    SEMrush
    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!!!
     
    deathshadow, Mar 2, 2017 IP
    sarahk, billzo and malky66 like this.
    SEMrush
  2. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #2
    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)?
     
    Last edited: Mar 4, 2017
    KewL, Mar 4, 2017 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,110
    Likes Received:
    1,692
    Best Answers:
    239
    Trophy Points:
    515
    #3
    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.
     
    deathshadow, Mar 4, 2017 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,110
    Likes Received:
    1,692
    Best Answers:
    239
    Trophy Points:
    515
    #4
    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.)
     
    deathshadow, Mar 4, 2017 IP
  5. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #5
    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
     
    KewL, Mar 4, 2017 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,110
    Likes Received:
    1,692
    Best Answers:
    239
    Trophy Points:
    515
    #6
    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.
     
    deathshadow, Mar 5, 2017 IP