Animasyon Popup örneği (Bootstrap destekli)

Posted by Tolgien Haziran 13, 2015 0 Comment 1500 views

Bootstrap’ın çok meşhur olduğu şu dönemde material destekli bir animasyonlu popup örneği yapmak istedim. Hem mobile cihazlar için hemde web siteniz için gayet kullanışlı olduğunu düşünüyorum. Full html5 ve css3 destekli olacak elbette.
Demo için tıklayabilirsiniz.
Öncelikle diyalog panelimizi hazırlayalım.

Hey!, Ben küçük bir balığım :(

< div>

İleride

elementini çok kullanacağız herhalde arkadaşlar. Fakat şu durumda IE, Firefox ve Safari tarafından desteklenmemekte.

Gelelim diyalog stil dosyamıza.

.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;
}

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

ve animasyonumuzun kilit noktası burada başlıyor,dialogFx.js dosyamız

;( 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 = {
		// çağırdık gitti
		onOpenDialog : function() { return false; },
		onCloseDialog : function() { return false; }
	}

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

		// tiklayınca kapanacak
		this.ctrlClose.addEventListener( 'click', this.toggle.bind(this) );

		// esc tuşumuz da diyalogu kapatıyor
		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' );
			} );

			// kapatma işlemi üzerinde çağırma yapıyoruz
			this.options.onCloseDialog( this );
		}
		else {
			classie.add( this.el, 'dialog--open' );

			// aç kapa aç kapa :))
			this.options.onOpenDialog( this );
		}
		this.isOpen = !this.isOpen;
	};

	// genel işlem
	window.DialogFx = DialogFx;

})( window );	

classie.js dosyamızı githubdan download edebileceğiniz gibi netten de bulabilirsiniz.




Demo için tıklayabilirsiniz.

Write Your Comment