demo görmek için tıkla
örnek 1 kodları
aşağıdaki kodları popup.js isminde kaydedip body öncesine ekleyin
kodlar
örnek 1 kodları
Kod Seç
<a href="http://images.123hdwallpapers.com/20150526/tumblr-trees-backgrounds-1280x720.jpg" popup="">ağaç</a>örnek 2 kodlarıKod Seç
<img width="200px" src="http://science-all.com/images/wallpapers/wallpaper-tumblr/wallpaper-tumblr-21.jpg" alt="" popup="">örnek 3 kodlarıKod Seç
<a href="http://youtu.be/wrk3y6SPLDU" popup>Nightcore - The Sons of Odin [HD]</a>
<br>
<a href="https://www.youtube.com/watch?v=wrk3y6SPLDU" popup>Nightcore - The Sons of Odin [HD] (youtu.be link)</a>örnek 4 kodlarıKod Seç
<button popup="#deneme">pop aç (#deneme seçicisini açar)</button>
<div id="deneme" style="display:none;">Deneme Seçicisinin içeriği</div>aşağıdaki kodları popup.js isminde kaydedip body öncesine ekleyin
kodlar
Kod Seç
'use strict';
var config = {
blackFrame : true,
background : '#000',
backgroundOpacity : '0.8',
removeIconColor : '#dcdcdc',
esc : true
};
function popupInit(){for(var e=document.querySelectorAll("[popup]"),t=0;t<e.length;t++)e[t].addEventListener("click",function(e){e.preventDefault();var t=this;t.getAttribute("popup")&&(t=document.querySelector(t.getAttribute("popup"))),popOpen(t)})}function fadeIn(e,t,o){if(e)if(o=o||1,e.style.opacity=0,e.style.filter="alpha(opacity=0)",e.style.display="block",e.style.visibility="visible",t)var i=0,n=setInterval(function(){i+=50/t,i>=o&&(clearInterval(n),i=o),e.style.opacity=i,e.style.filter="alpha(opacity="+100*i+")"},50);else e.style.opacity=1,e.style.filter="alpha(opacity=1)"}function fadeOut(e,t){if(e)if(t)var o=1,i=setInterval(function(){o-=50/t,0>=o&&(clearInterval(i),o=0,e.style.display="none",e.style.visibility="hidden"),e.style.opacity=o,e.style.filter="alpha(opacity="+100*o+")"},50);else e.style.opacity=0,e.style.filter="alpha(opacity=0)",e.style.display="none",e.style.visibility="hidden"}function getPageSize(){var e,t;window.innerHeight&&window.scrollMaxY?(e=document.body.scrollWidth,t=window.innerHeight+window.scrollMaxY):document.body.scrollHeight>document.body.offsetHeight?(e=document.body.scrollWidth,t=document.body.scrollHeight):(e=document.body.offsetWidth,t=document.body.offsetHeight);var o,i;self.innerHeight?(o=self.innerWidth,i=self.innerHeight):document.documentElement&&document.documentElement.clientHeight?(o=document.documentElement.clientWidth,i=document.documentElement.clientHeight):document.body&&(o=document.body.clientWidth,i=document.body.clientHeight);var n,l;return l=i>t?i:t,n=o>e?o:e,[n,l,o,i]}function getObjSize(e){var t,o,i=window.getComputedStyle(e),n=i.display,l=i.position,d=i.visibility;return"none"===n&&(e.style.position="absolute",e.style.visibility="hidden",e.style.display="block"),"IMG"==e.tagName?(t=e.naturalWidth,o=e.naturalHeight):(t=e.getBoundingClientRect().width,o=e.getBoundingClientRect().height),"none"===n&&(e.style.display=n,e.style.position=l,e.style.visibility=d),[t,o]}function createPopup(e){var t,o=e.outerHTML,i=getObjSize(e);if("A"==e.tagName){var n,l=e.getAttribute("href");if(n=getYoutubeId(l))o=showYoutubeVideo(n),t=scaleSize(560,315);else{if(isImage(l)){preloadImage(l);return!1}""==l?(o="<center>Adres bulunamadı!</center>",t=scaleSize(400,25)):t=scaleSize(i[0],i[1])}}else t=scaleSize(i[0],i[1]);document.getElementsByClassName("popupBody")[0].innerHTML=o,resize(t.width,t.height,t.top)}function scaleSize(e,t){var o,i,n=30,l=getPageSize();if(o=l[2]-20,i=l[3]-120,e>o||t>i){var d=Math.min(o/e,i/t);return{width:e*d,height:t*d,top:n}}return n=(i-t)/2-30,{width:e,height:t,top:n}}function preloadImage(e){var t;return t=new Image,t.src=e,t.onload=function(){document.getElementsByClassName("popupBody")[0].innerHTML=t.outerHTML;var e=scaleSize(t.naturalWidth,t.naturalHeight);resize(e.width,e.height,e.top)},t.onerror=function(){alert()},t}function resize(e,t,o){var i=document.getElementById("popup"),n=i.getElementsByClassName("popupContent")[0],l=n.getElementsByClassName("popupBody")[0];i.style.top=o+"px",n.style.width=e+12+"px",n.style.height=t+50+12+"px",l.querySelector("*").style.display="block";for(var d=l.getElementsByTagName("img"),r=0;r<d.length;r++)d[r].style.width="100%"}function background(){document.querySelector("body").insertAdjacentHTML("beforeend",'<div id="popup_kararti" style="width:100%; height:100%; position:fixed; top:0; left:0; background:'+config.background+'; display:none; z-index:9998;"></div>'),fadeIn(document.getElementById("popup_kararti"),500,config.backgroundOpacity),document.querySelector("body").style.overflow="hidden"}function popOpen(e){var t='<div id="popup" style="position: fixed;top:0px; bottom: 0px; left: 0px; right: 0px;z-index:9999;"><div class="popupContent" style="position: relative; margin: 0px auto; box-sizing: content-box; display: block; overflow: auto; opacity: 1; visibility: visible;"><div id="popClose"><div style="position: relative;font-size: 50px; padding-right: 5px; line-height: 1; float: right;cursor: pointer;color: '+config.removeIconColor+';">Ãâ€"</div><div style="clear:both;"></div></div><div class="popupBody" style="padding: 6px; background-color: #fff; border-radius: 8px;"></div></div></div>';document.querySelector("body").insertAdjacentHTML("beforeend",t),createPopup(e),background(),popClose()}function isImage(e){return e.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)}function getYoutubeId(e){var t;return t=e.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/),t&&11===t[2].length?t[2]:!1}function showYoutubeVideo(e){var t,o;return o=560,t=o/(560/315),showVideoIframe("//www.youtube.com/embed/"+e+"?badge=0&autoplay=1&html5=1",o,t)}function showVideoIframe(e,t,o){return o=o||t,'<div style="position: relative; display: block; height: 0; padding: 0; padding-bottom: 56.25%; overflow: hidden;"><iframe width="'+t+'" height="'+o+'" src="'+e+'" frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;bottom:0;height:100%;width:100%;border:0;"></iframe></div>'}function popRemove(){fadeOut(popup,500),popup.remove(),document.getElementById("popup_kararti").remove(),document.querySelector("body").style.overflow="auto"}function popClose(){document.getElementById("popup_kararti").addEventListener("click",popRemove),document.getElementById("popClose").addEventListener("click",popRemove),document.getElementById("popup").addEventListener("click",function(e){"popup"==e.target.getAttribute("id")&&popRemove()}),document.onkeydown=function(){var e=event.keyCode;27==e&&popRemove()}}popupInit();