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)
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
Kripto paralarda bot çalıştırmak ve en iyi 5 kripto para botu
Binance LeaderBoard kullanıcılarının işlemlerine göre al sat yapan bot yazalım.
Pandas ve ta-talib kütüphanelerini kullanarak hisse senetleri ve kripto paralar üzerinde al-sat sinyali oluşturalım
Güncel Tradingview scriptlerim (Çoklu tradingview indikatörleri)
Yapay zeka siteleri ile para kazanma
Milletimizin başı sağ olsun