jQuery araştırmalarım ve arşivim gittikçe artıyo artık zaman buldukça onlarıda sizlere anlatacağım inşallah. Bu tanıttığım aslında bir modern iletişim kutusu ama ben öyle düşünmüyorum bu bir pop-up ama tıklanınca açılan bir sayfa gibi aynı sayfada ve bildiğimiz pop-uplar gibi iğrenç değil 🙂
jQuery Avgrund Modal
jQuery 1.4 ile test edilmiştir çalışıyor. IE 6-9 arası problem çıkabilir bir test edin genede.
jQuery kütüphanesini ekledikten sonra butona verdiğiniz ID’yi aşağıdaki alana girmeniz yeterli. Verdiğim koddaki alanları doldurduğunuzda sizinde böyle bir pop-up sayfanız olucak 🙂
Alttaki “element” kısmındaki yere ID’nizi yazıyorsunuz örneğin ID’niz rooteto ise aşağıdaki şekilde yazıcaksınız.
$('#rooteto').avgrund({
Zaten her kodun yanında açıklaması yazıyor.
$('#rooteto').avgrund({ width: 380, // max is 640px height: 280, // max is 350px showClose: false, // switch to 'true' for enabling close button showCloseText: '', // type your text for close button closeByEscape: true, // enables closing popup by 'Esc'.. closeByDocument: true, // ..and by clicking document itself holderClass: '', // lets you name custom class for popin holder.. overlayClass: '', // ..and overlay block enableStackAnimation: false, // another animation type onBlurContainer: '', // enables blur filter for specified block openOnEvent: true, // set to 'false' to init on load setEvent: 'click', // use your event like 'mouseover', 'touchmove', etc. onLoad: function () { ... }, // set custom call before popin is inited.. onUnload: function () { ... }, // ..and after it was closed template: 'Your content goes here..' // or function() { ... } });
Template kısmına içeriğiniği giriyorsunuz ancak alt satıra inmeyi bilmiyorsanız jQuery’de onuda gösteriyim.
$('#rooteto').avgrund({ width: 380, // max is 640px height: 280, // max is 350px showClose: false, // switch to 'true' for enabling close button showCloseText: '', // type your text for close button closeByEscape: true, // enables closing popup by 'Esc'.. closeByDocument: true, // ..and by clicking document itself holderClass: '', // lets you name custom class for popin holder.. overlayClass: '', // ..and overlay block enableStackAnimation: false, // another animation type onBlurContainer: '', // enables blur filter for specified block openOnEvent: true, // set to 'false' to init on load setEvent: 'click', // use your event like 'mouseover', 'touchmove', etc. onLoad: function () { ... }, // set custom call before popin is inited.. onUnload: function () { ... }, // ..and after it was closed template: 'Your content goes here..' 'bir alt satır eklendi.' + 'bir alt satır eklendi.' // or function() { ... } });