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.
49000cookie-checkAnimasyon Popup örneği (Bootstrap destekli)
Kripto paralarda bot çalıştırmak ve en iyi 5 kripto para botu
Borsadaki robot işlemleri ve Algo Trading
Python ile Pandas ve TA-Lib kütüphanelerini kullanarak Hisse Senedi ve Fiyatlarını Simüle Etme
Binance üzerinde listelenen yeni kripto paraları tespit edip işlem yapan bot
Milletimizin başı sağ olsun
2023’te Yatırım Yapılabilecek En İyi Yapay Zeka Kripto Tokenları ve Projeleri
Derin öğrenme ve makine öğrenimi arasındaki fark nedir?
Python ile kripto paraları için al – sat sinyali gösteren bot yazalım.