Inspiration for Dialog Effects

A small collection of dialog effects using CSS animations for your inspiration. Some effects use SVG animations of morphing paths with the help of Snap.svg.
Dialog Effects

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

Last year we posted some inspiration for modal window effects and today we’d like to share some fresh ideas with you. Styles and trends change and this calls for different effects that fit to a modern UI. This new set contains some subtle animations and also some more fancy SVG morphing techniques for dialogs.

Please note that this was tested in latest browser versions only.

Please also note that IE11 does not seem to support vieport units in calc() which we use in some of the animation transforms.

For the dialog we use the following markup:

<div id="somedialog" class="dialog">
	<div class="dialog__overlay"></div>
	<div class="dialog__content">
		<h2><strong>Howdy</strong>, I'm a dialog box</h2><
		div><button class="action" data-dialog-close>Close</button></div>
	</div>
</div>

Note that in the future we’ll be able to use the native <dialog> element. But currently support is still very weak, with IE, Firefox and Safari not supporting it.

As you can see, we have a main dialog wrap which contains the overlay and the dialog content. The basic style for the dialog is the following (vendor prefixes are omitted):

.dialog,
.dialog__overlay {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.dialog {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.dialog__overlay {
	position: absolute;
	z-index: 1;
	background: rgba(55, 58, 71, 0.9);
	opacity: 0;
	transition: opacity 0.3s;
}

.dialog--open .dialog__overlay {
	opacity: 1;
	pointer-events: auto;
}

.dialog__content {
	width: 50%;
	max-width: 560px;
	min-width: 290px;
	background: #fff;
	padding: 4em;
	text-align: center;
	position: relative;
	z-index: 5;
	opacity: 0;
}

.dialog--open .dialog__content {
	pointer-events: auto;
}

/* Content */
.dialog h2 {
	margin: 0;
	font-weight: 400;
	font-size: 2em;
	padding: 0 0 2em;
	margin: 0;
}

We use flexbox on the main dialog element in order to center the dialog content. The overlay will appear with a transition. Please note that pointer events don’t work for IE < 11.
Some effects have an additional division for the inner content in order to hide it initially and fade it in after an effect of the modal is finished. This makes sense for effects that scale/distort the dialog.

An example for an effect (Sandra) is the following:

.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}

.dialog.dialog--open .dialog__content {
	animation-name: anim-open;
}

.dialog.dialog--close .dialog__content {
	animation-name: anim-close;
}

@keyframes anim-open {
	0% { opacity: 0; transform: scale3d(1.1, 1.1, 1); }
	100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes anim-close {
	0% { opacity: 1; }
	100% { opacity: 0; transform: scale3d(0.9, 0.9, 1); }
}

With adding the dialog--open and dialog--close classes, we can control the appearing of the dialog and its inner elements.

The script for the dialog is the following:

;( function( window ) {
	
	'use strict';

	var support = { animations : Modernizr.cssanimations },
		animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
		animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
		onEndAnimation = function( el, callback ) {
			var onEndCallbackFn = function( ev ) {
				if( support.animations ) {
					if( ev.target != this ) return;
					this.removeEventListener( animEndEventName, onEndCallbackFn );
				}
				if( callback && typeof callback === 'function' ) { callback.call(); }
			};
			if( support.animations ) {
				el.addEventListener( animEndEventName, onEndCallbackFn );
			}
			else {
				onEndCallbackFn();
			}
		};

	function extend( a, b ) {
		for( var key in b ) { 
			if( b.hasOwnProperty( key ) ) {
				a[key] = b[key];
			}
		}
		return a;
	}

	function DialogFx( el, options ) {
		this.el = el;
		this.options = extend( {}, this.options );
		extend( this.options, options );
		this.ctrlClose = this.el.querySelector( '[data-dialog-close]' );
		this.isOpen = false;
		this._initEvents();
	}

	DialogFx.prototype.options = {
		// callbacks
		onOpenDialog : function() { return false; },
		onCloseDialog : function() { return false; }
	}

	DialogFx.prototype._initEvents = function() {
		var self = this;

		// close action
		this.ctrlClose.addEventListener( 'click', this.toggle.bind(this) );

		// esc key closes dialog
		document.addEventListener( 'keydown', function( ev ) {
			var keyCode = ev.keyCode || ev.which;
			if( keyCode === 27 && self.isOpen ) {
				self.toggle();
			}
		} );

		this.el.querySelector( '.dialog__overlay' ).addEventListener( 'click', this.toggle.bind(this) );
	}

	DialogFx.prototype.toggle = function() {
		var self = this;
		if( this.isOpen ) {
			classie.remove( this.el, 'dialog--open' );
			classie.add( self.el, 'dialog--close' );
			
			onEndAnimation( this.el.querySelector( '.dialog__content' ), function() {
				classie.remove( self.el, 'dialog--close' );
			} );

			// callback on close
			this.options.onCloseDialog( this );
		}
		else {
			classie.add( this.el, 'dialog--open' );

			// callback on open
			this.options.onOpenDialog( this );
		}
		this.isOpen = !this.isOpen;
	};

	// add to global namespace
	window.DialogFx = DialogFx;

})( window );	

And we can call the dialog like this:

<script src="js/classie.js"></script>
<script src="js/dialogFx.js"></script>
<script>
	(function() {

		var dlgtrigger = document.querySelector( '[data-dialog]' ),
			somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
			dlg = new DialogFx( somedialog );

		dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );

	})();
</script>

…where our trigger button has the data-attribute data-dialog="somedialog".

For the SVG effects (except the line drawing of Wilma) we use Snap.svg to morph SVG paths. We add the SVG shape into a wrap right into the dialog content and then we define the path to morph to in data-morph-open.

(function() {

	var dlgtrigger = document.querySelector( '[data-dialog]' ),

		somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
		// svg..
		morphEl = somedialog.querySelector( '.morph-shape' ),
		s = Snap( morphEl.querySelector( 'svg' ) ),
		path = s.select( 'path' ),
		initialPath = path.attr('d'),
		steps = { 
			open : morphEl.getAttribute( 'data-morph-open' )
		},
		dlg = new DialogFx( somedialog, {
			onOpenDialog : function( instance ) {
				// reset path
				morphEl.querySelector( 'svg > path' ).setAttribute( 'd', initialPath );
				// animate path
				path.stop().animate( { 'path' : steps.open }, 300, mina.easein );
			}
		} );

	dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );

})();

There seems to be some kind of stacking problem in Safari with the perspective effects. Read more about it here: Weird CSS Rotation Animation Glitch in Safari

We hope you enjoy these little effects and find them inspiring!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 70

Comments are closed.
  1. Has anyone had any luck implementing a fix for Safari, or is there simply not one? I seem to only be having issues with Safari on a PC, which no one uses anyways.

  2. Excellent demo, thanks for sharing!

    For those who wants to use multiple dialogs in a single page, querySelectorAll() should be used instead of querySelector(), ie.

    (function()
    {
    var dlgTrigger = document.querySelectorAll(‘[data-dialog]’);
    var someDialog, dlg;

    for (i = 0; i < dlgTrigger.length; i++)
    {
    someDialog = document.getElementById( dlgTrigger[i].getAttribute( 'data-dialog' ) );
    dlg = new DialogFx(someDialog);

    dlgTrigger[i].addEventListener( 'click', dlg.toggle.bind(dlg) );
    }
    })();

    • Thanks a lot ! This is exactly what need.
      This demo is beautiful, well done and thanks for sharing ! πŸ™‚

  3. Manoela, where do you get inspiration? Every your tutorial is amazing and your ideas are brilliant!

  4. If I use one modal window for a few buttons on page, I have a problem.
    When I trying to close window, window automatic opening soon

    Recall Me – button in header

    Recall Me – button in contact section

    I use this code:

    (function() {
    var dlgTrigger = document.querySelectorAll(‘[data-dialog]’);
    var someDialog, dlg;
    for (i = 0; i < dlgTrigger.length; i++) {
    someDialog = document.getElementById( dlgTrigger[i].getAttribute( 'data-dialog' ) );
    dlg = new DialogFx(someDialog);
    dlgTrigger[i].addEventListener( 'click', dlg.toggle.bind(dlg) );
    }
    })();

  5. Hi Mary Lou, very, very cool dialog effects you guys have going here, thanks for sharing!
    I implemented the dialog into one localhost project and used it for showing that i use cookies, just for fun. I then also tried to use the same for showing if any form input was empty, and i keep getting ‘Uncaught TypeError: Cannot read property ‘querySelector’ of null’. I have appended the script to the end of the body, i load the markup for my dialog through $.post and then i use:
    var dlg = new DialogFx(document.getElementById(‘cookie_dialog’));
    dlg.toggle();

    Error show here.

    Any chance you guys know what is going on?

    • You need to make sure that every data-dialog=’myDialog’ attribute has a dialog div with the class ‘dialog’ and a data-dialog-close attribute somewhere. The ID of the div should match the data-dialog’s value.

    • If you look at the dialogFx.js file, there are querySelectors for the dialog__content, dialog__overlay classes and a data-dialog-close attribute, so make sure your dialog div has all of those things. The element that calls the dialog with the data-dialog=’x’ attribute must match the ID of the dialog you’re calling.

  6. Is there an easy method to disable some functionality without ripping apart the dialogFx js file? For example, I want to disable the data-dialog-close functionality on click of the overlay, or outside the dialog. Is there an easy way to do that?

  7. awesome plugin πŸ™‚
    BTW , can i use this plugin in codeigniter ? example after i login , then the dialog box appear says “Welcome” . ?

    can anyone ?

    Thanks in advance πŸ™‚
    i’m very new in programming .

  8. I have a question, When I click the close button dialog box reopen automatically! how to solve it?
    This code :
    $( document ).ready(function() {
    var dlgTrigger = document.querySelectorAll('[data-dialog]');
    var someDialog, dlg;
    for (i = 0; i < dlgTrigger.length; i++)
    {
    someDialog = document.getElementById( dlgTrigger[i].getAttribute( 'data-dialog' ) );
    dlg = new DialogFx(someDialog);
    dlgTrigger[i].addEventListener( 'click', dlg.toggle.bind(dlg) );
    }
    });

    • seems to be pointer events have to beset explicitly. Adding this to css helped me


      .dialog button[data-dialog-close]{
      pointer-events: none;
      }

      .dialog–open button[data-dialog-close]{
      pointer-events: auto;
      }

  9. Why did you use double underlines in class names? it’s not standard as far as i know. really interested to know xD

  10. Hello. I do not speak English. I use a translator. Thank you for a very cool script modal windows. I have this problem, and I decided to write you a question. How to make so that you can open several of these modal windows on a single page? I made them with different IDs, and still runs only the first window, and the rest do not work.

  11. how Can i use more than one dialog box in the same page !?
    when i changing the ids it didn’t work !

  12. Great work! Can anyone help me how to call modal box by js code (don’t need to click button)?