× İletişim Formu Blogger Uyumlu Modal Tasarım Arlina Design 6/02/2017 Etiketler : Blogger CSS Blogger CSS3 Blogger javaScript Blogger jQuery Blogger Modal Arlina Design <!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0 auto 0 auto;height:100vh;background:#f44336} *{box-sizing:border-box} h1,h2,h3,p{font-weight:300;margin:0 0 2.4rem 0} h1,h2,h3{line-height:1.3} a{text-decoration:none;color:inherit;font-weight:400} .modal{will-change:visibility,opacity;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;z-index:1000;visibility:hidden;opacity:0;-webkit-transition:all 0.5s cubic-bezier(0.23,1,0.32,1);transition:all 0.5s cubic-bezier(0.23,1,0.32,1);-webkit-transition-delay:$modal-delay;transition-delay:$modal-delay} .modal--active{visibility:visible;opacity:1} .modal--align-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start} .modal__bg{background:transparent} .modal__dialog{max-width:600px;padding:1.2rem} .modal__content{will-change:transform,opacity;position:relative;padding:2.4rem;background:#ffebee;background-clip:padding-box;box-shadow:0 12px 15px 0 rgba(0,0,0,0.25);opacity:0;-webkit-transition:all 0.25s cubic-bezier(0.23,1,0.32,1);transition:all 0.25s cubic-bezier(0.23,1,0.32,1)} .modal__content--active{opacity:1} .modal__close{z-index:1100;cursor:pointer} .modal__trigger{position:relative;display:inline-block;padding:1.2rem 2.4rem;color:rgba(0,0,0,0.7);line-height:1;cursor:pointer;background:#ffebee;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all 0.5s cubic-bezier(0.23,1,0.32,1);transition:all 0.5s cubic-bezier(0.23,1,0.32,1)} .modal__trigger--active{z-index:10} .modal__trigger:hover{background:#e5d3d6} #modal__temp{will-change:transform,opacity;position:absolute;top:0;left:0;right:0;bottom:0;background:#ffebee;-webkit-transform:none;transform:none;opacity:1;-webkit-transition:opacity 0.1s ease-out,-webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1);transition:opacity 0.1s ease-out,-webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1);transition:opacity 0.1s ease-out,transform 0.5s cubic-bezier(0.23,1,0.32,1);transition:opacity 0.1s ease-out,transform 0.5s cubic-bezier(0.23,1,0.32,1),-webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1)} img{max-width:100%} .demo-btns header{padding:7vh 10vw;background:#ffebee;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center} .demo-btns header h1{margin:0;color:rgba(0,0,0,0.54);font-weight:300} .demo-btns .info{background:#f44336;padding:3vh 10vw;height:70vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-flow:column wrap;flex-flow:column wrap} .demo-btns p{text-align:center;color:#fff} .demo-btns .link{font-size:20px} .demo-btns .modal__trigger{margin-right:3px} @media (max-width:640px){.demo-btns .modal__trigger{margin-bottom:0.8rem}} .demo-close{position:absolute;top:0;right:0;margin:1.2rem;padding:0.6rem;background:rgba(0,0,0,0.3);border-radius:50%;-webkit-transition:all 0.5s cubic-bezier(0.23,1,0.32,1);transition:all 0.5s cubic-bezier(0.23,1,0.32,1)} .demo-close svg{width:24px;fill:#fff;pointer-events:none;vertical-align:top} .demo-close:hover{background:rgba(0,0,0,0.6)} </style> </head> <body> <div class="demo-btns"> <header> <h1>Material Modal Tasarım</h1> </header> <div class="info"> <div class="buttons"> <p> <a href="" data-modal="#modal" class="modal__trigger">Modal 1</a> <a href="" data-modal="#modal2" class="modal__trigger">Modal 2</a> <a href="" data-modal="#modal3" class="modal__trigger">Modal 3</a> </p> </div> <p>Bir modalı etkinleştirmek için bir butona tıklayın.<br><a href="http://bloggereklentileri.blogspot.com" target="_blank" class="link">Blogger Eklentileri</a></p> </div> </div> <div id="modal" class="modal modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Modal</h1> <p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> <a href="" class="modal__close demo-close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg> </a> </div> </div> </div> <div id="modal2" class="modal modal--align-top modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Büyük Modal</h1> <h3>Teknoloji Çocuklarla İletişimimize Destek mi Köstek mi?</h3> <p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbLGh-8t71-IWwYCeROcvCLLTd9sVxoM95uV1PFfOdEbs3FQ5dCcR-FmBJdtKuzeRnPnA8kxgzVtwSH5NdC7lsMgCTq8DGqY-3tIbisUHshaZtY6kgEUNmsbIecqqvwGDq-6T7iK7u-p4/s640/teknoloji.jpg" alt="resim" /></p> <p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur. İlgili bir veli olarak çocuğunuza yakın bir mesafede oturup, hem çocuğunuzun seyrettiği, ilgilendiği veya kullandığı şeyleri kontrol edip gerektiğinde müdahale edebilirsiniz, hem de işinizi tamamlayabilirsiniz. Çocuğunuzun bilgisayarına güvenlik programlarını indirip uygunsuz sitelere girişini engelleyebilirsiniz veya günümüzde medya okuryazarı denilen medya zekâsı yüksek, eleştirel düşünebilen çocuk olması ve kendi kendini denetlemesi için onu yetiştirebilirseniz.</p> <p>Bireysel kullanılan teknoloji ürünleri de vardır, grup olarak kullanılabilecek teknoloji ürünleri de. İkisine de dengeli olmak şartıyla zaman ayırabilirsiniz. Ama beraberce yapabileceklerinizi seçmekte fayda vardır. Örneğin, internet sayfasında bulunan eğitici ve eğlenceli etkinliklerden birlikte yapılabilecek olanları seçersiniz. Böylece sohbet de ederseniz, işbirliği de yaparsanız, beraberce eğlenir aile olmanın tadını da çıkarırsınız.</p> <a href="" class="modal__close demo-close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg> </a> </div> </div> </div> <div id="modal3" class="modal modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Modal 3</h1> <p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> <a href="" class="modal__close demo-close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg> </a> </div> </div> </div> <script> var Modal=(function(){var trigger=$qsa('.modal__trigger');var modals=$qsa('.modal');var modalsbg=$qsa('.modal__bg');var content=$qsa('.modal__content');var closers=$qsa('.modal__close');var w=window;var isOpen=false;var contentDelay=400;var len=trigger.length;function $qsa(el){return document.querySelectorAll(el);} var getId=function(event){event.preventDefault();var self=this;var modalId=self.dataset.modal;var len=modalId.length;var modalIdTrimmed=modalId.substring(1,len);var modal=document.getElementById(modalIdTrimmed);makeDiv(self,modal);};var makeDiv=function(self,modal){var fakediv=document.getElementById('modal__temp');if(fakediv===null){var div=document.createElement('div');div.id='modal__temp';self.appendChild(div);moveTrig(self,modal,div);}};var moveTrig=function(trig,modal,div){var trigProps=trig.getBoundingClientRect();var m=modal;var mProps=m.querySelector('.modal__content').getBoundingClientRect();var transX,transY,scaleX,scaleY;var xc=w.innerWidth / 2;var yc=w.innerHeight / 2;trig.classList.add('modal__trigger--active');scaleX=mProps.width / trigProps.width;scaleY=mProps.height / trigProps.height;scaleX=scaleX.toFixed(3);scaleY=scaleY.toFixed(3);transX=Math.round(xc-trigProps.left-trigProps.width / 2);transY=Math.round(yc-trigProps.top-trigProps.height / 2);if(m.classList.contains('modal--align-top')){transY=Math.round(mProps.height / 2+mProps.top-trigProps.top-trigProps.height / 2);} trig.style.transform='translate('+transX+'px, '+transY+'px)';trig.style.webkitTransform='translate('+transX+'px, '+transY+'px)';div.style.transform='scale('+scaleX+','+scaleY+')';div.style.webkitTransform='scale('+scaleX+','+scaleY+')';window.setTimeout(function(){window.requestAnimationFrame(function(){open(m,div);});},contentDelay);};var open=function(m,div){if(!isOpen){var content=m.querySelector('.modal__content');m.classList.add('modal--active');content.classList.add('modal__content--active');content.addEventListener('transitionend',hideDiv,false);isOpen=true;} function hideDiv(){div.style.opacity='0';content.removeEventListener('transitionend',hideDiv,false);}};var close=function(event){event.preventDefault();event.stopImmediatePropagation();var target=event.target;var div=document.getElementById('modal__temp');if(isOpen&&target.classList.contains('modal__bg')||target.classList.contains('modal__close')){div.style.opacity='1';div.removeAttribute('style');for(var i=0;i<len;i++){modals[i].classList.remove('modal--active');content[i].classList.remove('modal__content--active');trigger[i].style.transform='none';trigger[i].style.webkitTransform='none';trigger[i].classList.remove('modal__trigger--active');} div.addEventListener('transitionend',removeDiv,false);isOpen=false;} function removeDiv(){setTimeout(function(){window.requestAnimationFrame(function(){div.remove();});},contentDelay-50);}};var bindActions=function(){for(var i=0;i<len;i++){trigger[i].addEventListener('click',getId,false);closers[i].addEventListener('click',close,false);modalsbg[i].addEventListener('click',close,false);}};var init=function(){bindActions();};return{init:init};}());Modal.init(); </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger Uyumlu Modal Tasarım" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger Uyumlu Modal Tasarım Arlina Design 6/02/2017 Etiketler : Blogger CSS Blogger CSS3 Blogger javaScript Blogger jQuery Blogger Modal Arlina Design <!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0 auto 0 auto;height:100vh;background:#f44336} *{box-sizing:border-box} h1,h2,h3,p{font-weight:300;margin:0 0 2.4rem 0} h1,h2,h3{line-height:1.3} a{text-decoration:none;color:inherit;font-weight:400} .modal{will-change:visibility,opacity;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;z-index:1000;visibility:hidden;opacity:0;-webkit-transition:all 0.5s cubic-bezier(0.23,1,0.32,1);transition:all 0.5s cubic-bezier(0.23,1,0.32,1);-webkit-transition-delay:$modal-delay;transition-delay:$modal-delay} .modal--active{visibility:visible;opacity:1} .modal--align-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start} .modal__bg{background:transparent} .modal__dialog{max-width:600px;padding:1.2rem} .modal__content{will-change:transform,opacity;position:relative;padding:2.4rem;background:#ffebee;background-clip:padding-box;box-shadow:0 12px 15px 0 rgba(0,0,0,0.25);opacity:0;-webkit-transition:all 0.25s cubic-bezier(0.23,1,0.32,1);transition:all 0.25s cubic-bezier(0.23,1,0.32,1)} .modal__content--active{opacity:1} .modal__close{z-index:1100;cursor:pointer} .modal__trigger{position:relative;display:inline-block;padding:1.2rem 2.4rem;color:rgba(0,0,0,0.7);line-height:1;cursor:pointer;background:#ffebee;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all 0.5s cubic-bezier(0.23,1,0.32,1);transition:all 0.5s cubic-bezier(0.23,1,0.32,1)} .modal__trigger--active{z-index:10} .modal__trigger:hover{background:#e5d3d6} #modal__temp{will-change:transform,opacity;position:absolute;top:0;left:0;right:0;bottom:0;background:#ffebee;-webkit-transform:none;transform:none;opacity:1;-webkit-transition:opacity 0.1s ease-out,-webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1);transition:opacity 0.1s ease-out,-webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1);transition:opacity 0.1s ease-out,transform 0.5s cubic-bezier(0.23,1,0.32,1);transition:opacity 0.1s ease-out,transform 0.5s cubic-bezier(0.23,1,0.32,1),-webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1)} img{max-width:100%} .demo-btns header{padding:7vh 10vw;background:#ffebee;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center} .demo-btns header h1{margin:0;color:rgba(0,0,0,0.54);font-weight:300} .demo-btns .info{background:#f44336;padding:3vh 10vw;height:70vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-flow:column wrap;flex-flow:column wrap} .demo-btns p{text-align:center;color:#fff} .demo-btns .link{font-size:20px} .demo-btns .modal__trigger{margin-right:3px} @media (max-width:640px){.demo-btns .modal__trigger{margin-bottom:0.8rem}} .demo-close{position:absolute;top:0;right:0;margin:1.2rem;padding:0.6rem;background:rgba(0,0,0,0.3);border-radius:50%;-webkit-transition:all 0.5s cubic-bezier(0.23,1,0.32,1);transition:all 0.5s cubic-bezier(0.23,1,0.32,1)} .demo-close svg{width:24px;fill:#fff;pointer-events:none;vertical-align:top} .demo-close:hover{background:rgba(0,0,0,0.6)} </style> </head> <body> <div class="demo-btns"> <header> <h1>Material Modal Tasarım</h1> </header> <div class="info"> <div class="buttons"> <p> <a href="" data-modal="#modal" class="modal__trigger">Modal 1</a> <a href="" data-modal="#modal2" class="modal__trigger">Modal 2</a> <a href="" data-modal="#modal3" class="modal__trigger">Modal 3</a> </p> </div> <p>Bir modalı etkinleştirmek için bir butona tıklayın.<br><a href="http://bloggereklentileri.blogspot.com" target="_blank" class="link">Blogger Eklentileri</a></p> </div> </div> <div id="modal" class="modal modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Modal</h1> <p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> <a href="" class="modal__close demo-close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg> </a> </div> </div> </div> <div id="modal2" class="modal modal--align-top modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Büyük Modal</h1> <h3>Teknoloji Çocuklarla İletişimimize Destek mi Köstek mi?</h3> <p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbLGh-8t71-IWwYCeROcvCLLTd9sVxoM95uV1PFfOdEbs3FQ5dCcR-FmBJdtKuzeRnPnA8kxgzVtwSH5NdC7lsMgCTq8DGqY-3tIbisUHshaZtY6kgEUNmsbIecqqvwGDq-6T7iK7u-p4/s640/teknoloji.jpg" alt="resim" /></p> <p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur. İlgili bir veli olarak çocuğunuza yakın bir mesafede oturup, hem çocuğunuzun seyrettiği, ilgilendiği veya kullandığı şeyleri kontrol edip gerektiğinde müdahale edebilirsiniz, hem de işinizi tamamlayabilirsiniz. Çocuğunuzun bilgisayarına güvenlik programlarını indirip uygunsuz sitelere girişini engelleyebilirsiniz veya günümüzde medya okuryazarı denilen medya zekâsı yüksek, eleştirel düşünebilen çocuk olması ve kendi kendini denetlemesi için onu yetiştirebilirseniz.</p> <p>Bireysel kullanılan teknoloji ürünleri de vardır, grup olarak kullanılabilecek teknoloji ürünleri de. İkisine de dengeli olmak şartıyla zaman ayırabilirsiniz. Ama beraberce yapabileceklerinizi seçmekte fayda vardır. Örneğin, internet sayfasında bulunan eğitici ve eğlenceli etkinliklerden birlikte yapılabilecek olanları seçersiniz. Böylece sohbet de ederseniz, işbirliği de yaparsanız, beraberce eğlenir aile olmanın tadını da çıkarırsınız.</p> <a href="" class="modal__close demo-close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg> </a> </div> </div> </div> <div id="modal3" class="modal modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Modal 3</h1> <p>Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> <a href="" class="modal__close demo-close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg> </a> </div> </div> </div> <script> var Modal=(function(){var trigger=$qsa('.modal__trigger');var modals=$qsa('.modal');var modalsbg=$qsa('.modal__bg');var content=$qsa('.modal__content');var closers=$qsa('.modal__close');var w=window;var isOpen=false;var contentDelay=400;var len=trigger.length;function $qsa(el){return document.querySelectorAll(el);} var getId=function(event){event.preventDefault();var self=this;var modalId=self.dataset.modal;var len=modalId.length;var modalIdTrimmed=modalId.substring(1,len);var modal=document.getElementById(modalIdTrimmed);makeDiv(self,modal);};var makeDiv=function(self,modal){var fakediv=document.getElementById('modal__temp');if(fakediv===null){var div=document.createElement('div');div.id='modal__temp';self.appendChild(div);moveTrig(self,modal,div);}};var moveTrig=function(trig,modal,div){var trigProps=trig.getBoundingClientRect();var m=modal;var mProps=m.querySelector('.modal__content').getBoundingClientRect();var transX,transY,scaleX,scaleY;var xc=w.innerWidth / 2;var yc=w.innerHeight / 2;trig.classList.add('modal__trigger--active');scaleX=mProps.width / trigProps.width;scaleY=mProps.height / trigProps.height;scaleX=scaleX.toFixed(3);scaleY=scaleY.toFixed(3);transX=Math.round(xc-trigProps.left-trigProps.width / 2);transY=Math.round(yc-trigProps.top-trigProps.height / 2);if(m.classList.contains('modal--align-top')){transY=Math.round(mProps.height / 2+mProps.top-trigProps.top-trigProps.height / 2);} trig.style.transform='translate('+transX+'px, '+transY+'px)';trig.style.webkitTransform='translate('+transX+'px, '+transY+'px)';div.style.transform='scale('+scaleX+','+scaleY+')';div.style.webkitTransform='scale('+scaleX+','+scaleY+')';window.setTimeout(function(){window.requestAnimationFrame(function(){open(m,div);});},contentDelay);};var open=function(m,div){if(!isOpen){var content=m.querySelector('.modal__content');m.classList.add('modal--active');content.classList.add('modal__content--active');content.addEventListener('transitionend',hideDiv,false);isOpen=true;} function hideDiv(){div.style.opacity='0';content.removeEventListener('transitionend',hideDiv,false);}};var close=function(event){event.preventDefault();event.stopImmediatePropagation();var target=event.target;var div=document.getElementById('modal__temp');if(isOpen&&target.classList.contains('modal__bg')||target.classList.contains('modal__close')){div.style.opacity='1';div.removeAttribute('style');for(var i=0;i<len;i++){modals[i].classList.remove('modal--active');content[i].classList.remove('modal__content--active');trigger[i].style.transform='none';trigger[i].style.webkitTransform='none';trigger[i].classList.remove('modal__trigger--active');} div.addEventListener('transitionend',removeDiv,false);isOpen=false;} function removeDiv(){setTimeout(function(){window.requestAnimationFrame(function(){div.remove();});},contentDelay-50);}};var bindActions=function(){for(var i=0;i<len;i++){trigger[i].addEventListener('click',getId,false);closers[i].addEventListener('click',close,false);modalsbg[i].addEventListener('click',close,false);}};var init=function(){bindActions();};return{init:init};}());Modal.init(); </script> </body> </html>
Yorum Gönder