Jquery Modal Popup Yapımı – Basit ve Eklenti Kullanmadan

Eklentisiz Jquery modal popup yapımı ile basit işlerde, arka planı koyu, resim önizleme veya herhangi başka amaçlar için kullanılabilen resim önizleme uygulaması oluşturacağız. Sizler resim yerine içerisini düzenleyebilir, yazılar ekleyebilir, kendi amaçlarınız doğrultusunda tasarımınızı oluşturabilirsiniz.

Amacımız site içerisinde kendimize göre şekillendirilmiş modal pencere değil, sayfaya ortalanmış halde tarayıcı üzerinden popup pencere açmak ise sitemde bulunan Javascript Popup Pencere Açmak konulu içeriğe göz atabilirsiniz.

Bu açılır pencere açma örneği içerisinde varsayılan olarak bir etiketi yerleştirdim ve sitedeki bir resme tıklanıldığında url değerini aktararak resmin büyük halini modal pencere üzerinde gösterdim.

Yukardaki HTML elemanlarının bu uygulamadaki görevleri şöyle ki;

• Arka planı bir parça koyulaştırmak için “simple_modal_overlay” id li div elementini kullanıyoruz.
• Açılır pencereyi “simple_modal_overlayContent” idli div üzerinden yöneteceğiz.
• “simple_modal_capsule” ve “simple_modal_content” idli div elementleri ile dikey olarak, “simple_modal_center” li div ile yatay olarak modal pencereyi ortalamış oluyoruz.
• Modal pencerenin dışına veya “simple_modal_close” id li kapat butonuna tıklanılınca da pencereyi kapatıyoruz.

Aşağıdaki CSS kodları ile bu tasarımları da oluşturmuş oluyoruz.

#simple_modal_overlay{ /*arkaplan*/
	position: fixed; 
	width: 100%; 
	height: 100%; 
	top: 0px; 
	left: 0px; 
	background-color: #000; 
	opacity: 0.7;
	filter: alpha(opacity = 70) !important;
	display: none;
	z-index: 10000;
}

#simple_modal_overlayContent{ /*modal pencere container*/
	position: fixed; 
	height:100%;
	width:100%;
	top: 0px; 
	left: 0px;
	text-align: center;
	display: none;
	overflow: hidden;
	z-index: 10000;
}

#simple_modal_close{ /*kapat butonu*/
	position:fixed;right:15px; top:15px; cursor:pointer;
}

#simple_modal_capsule{ /*dikey ortala*/
	display: table;
	height: 100%;
	width:100%;
	overflow: hidden;
	position:relative
}
#simple_modal_content{ /*dikey ortala*/
	display: table-cell;
	vertical-align: middle;
}
#simple_modal_center{ /*yatay ortala*/
	width:80%; margin:auto;
}

#simple_modal_img{
	cursor: pointer;
	border-radius:5px;
	max-width:100%
}

Hangi resme tıklanıldığında pencere açılmasını istiyorsak o resmin önizleme halini “src” özelliğinde, pencere içerisinde açılacak büyük boyuttaki hallerini de “data-src” özelliğine ekleyip etiketi içerisinde belirtiyoruz.

Açılır pencere uygulamasının tasarımını oluşturduk. JQUERY kütüphanesini projeye dahil ediyoruz ve resimlere tıklanıldığında resim url değerini alıp popup pencereyi açarak içerisine aktarıyoruz ve pencereyi görünür hale getiriyoruz.