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.

Demo / Download

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() { ... }
});