CSS3 Popup

admin.css

/**
 * Window
 */
.sh-window {
	opacity: 0;
	position: absolute;
	top: 33%;
	left: 50%;
	-webkit-transform: scale(.6) translate(-50%,-50%);
       -moz-transform: scale(.6) translate(-50%,-50%);
        -ms-transform: scale(.6) translate(-50%,-50%);
         -o-transform: scale(.6) translate(-50%,-50%);
            transform: scale(.6) translate(-50%,-50%);
	-webkit-transform-origin: 0 0;
	   -moz-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	     -o-transform-origin: 0 0;
	        transform-origin: 0 0;
	min-width: 400px;
	border-radius: 3px;
	box-shadow: 0 1px 12px hsla(0,0%,0%,.3), 0 1px 0 hsla(0,0%,0%,.3), 0 -1px 0 hsla(0,0%,0%,.05);
	background-color: #fff;
	-webkit-transition: all 0.13s ease-out;
	}
.sh-window.is-visible {
	opacity: 1;
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	     -o-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	}
.sh-window.is-hidden {
	display: block;
	opacity: 0;
	-webkit-transform: translate(-50%,0%);
	   -moz-transform: translate(-50%,0%);
	    -ms-transform: translate(-50%,0%);
	     -o-transform: translate(-50%,0%);
	        transform: translate(-50%,0%);
	}

modernizr.js

// …

// transitionend event
var transitionEndEventNames = {
	'WebkitTransition': 'webkitTransitionEnd',
	'MozTransition': 'transitionend',
	'OTransition': 'oTransitionEnd',
	'msTransition': 'MSTransitionEnd',
	'transition': 'transitionend'
};
var TRANSITION_END_EVENT = transitionEndEventNames[Modernizr.prefixed('transition')];

utils.js

	window.SpringhareAdmin.popup = function(view) {
		var win = view.render();

		// Events
		win.on('click', '.js-close, .js-save', function(e) {
			e.preventDefault();
			win.addClass('is-hidden');
			if (TRANSITION_END_EVENT) {
				win.on(TRANSITION_END_EVENT, function() {
					win.remove();
				});
			}
			else {
				setTimeout(function() {
					win.remove();
				}, 150);
			}
		});

		// Show
		$('body').append(win);
		setTimeout(function() {
			win.addClass('is-visible');
		}, 0);
	};