Jquery Basit Açılır Kapanır Pencere Yapımı

1.İlk önce yeni bir html dosyası oluşturun ve içine şu kodları yerleştirin.

Basit pencere örneğini görmek için tıklayınız.









  Bu örnek Cudjex.com da anlatılmıştır.

2.CSS kodlarını yerleştirin.



#boxes .window {

position:absolute;

left:0;

top:0;

width:440px;

height:200px;

display:none;

z-index:9999;

padding:20px;

}



#boxes #dialog2 {

background:#D7ECF2;

width:200px;

height:150px;

padding:25px;

border:2px solid #EA0E48;

-webkit-box-shadow: 0 8px 6px -6px #EA0E48;

-moz-box-shadow: 0 8px 6px -6px #EA0E48;

box-shadow: 0 8px 6px -6px #EA0E48;



}

3.Javascript kodlarını yerleştirin.

<script></script>

<script>



$(document).ready(function() {	



	//select all the a tag with name equal to modal

	$('a[name=modal]').click(function(e) {

		//Cancel the link behavior

		e.preventDefault();



		//Get the A tag

		var id = $(this).attr('href');



		//Get the screen height and width

		var maskHeight = $(document).height();

		var maskWidth = $(window).width();



		//Get the window height and width

		var winH = $(window).height();

		var winW = $(window).width();



		//Set the popup window to center

		$(id).css('top',  winH/2-$(id).height()/2);

		$(id).css('left', winW/2-$(id).width()/2);



		//transition effect

		$(id).fadeIn(2000); 



	});



	//if close button is clicked

	$('.window .close').click(function (e) {

		//Cancel the link behavior

		e.preventDefault();



		$('#mask').hide();

		$('.window').hide();

	});		



	//if mask is clicked

	$('#mask').click(function () {

		$(this).hide();

		$('.window').hide();

	});			



});



</script>

Demo | Kaynak | İndir

Jquery Basit Açılır Kapanır Pencere Yapımı

Üye Girişi Yap