İçerikler
Bu eğitimde, etkili bir modal penceresinin nası oluşturulduğundan bahsedeceğim. Bu tarz modal pencerelerini reklam amaçlı olarak değil, bilgilendirme yada form açmak üzere de kullanılabilir olduğunu unutmamalıyız. Kullanıcıları aynı sayfada tutup, farklı yollara yönlendirmeler yapmadan işlemlerini gerçekleştirmelerini sağlayabilirsiniz. Modern bir kullanımla birlikte kullanıcı deneyimini de arttırabilirsiniz.
Modern bir modal açılır penceresi hazırlamak için Html, Css ve Javascript kullanacağız. Html ve Css alanlarını istediğiniz gibi düzenleme yaparak kullanabilirsiniz.
Açılır Pencere HTML Bölümü
Bu bölümde HTML kodlarını oluşturacağız. Bu alanda tıklatıldığında açılması için bir A etiketi oluşturuyoruz. Tabi bunun dışında herhangi bir nesne de oluşturabilirsiniz. Burada en önemli olan unsur id değerinin belirlenmesidir.
Tıklama işleminin yapılacağı nesneyi tanımladıktan sonra bu tetikleme ile açılacak modal pencere alanını oluşturuyoruz. Bu alanı pencereKutu ve pencere değerleri ile CSS düzenlemesi yapıyoruz.
<a href="javascript:void(0);" id="pencereLink">Modal Pencere Aç</a>
<div id="pencereKutu" class="pencere">
<div class="pencere-content">
<div class="pencere-head">
<span class="kapat">x</span>
<h2>Modal Pencere Başlığı</h2>
</div>
<div class="pencere-main">
<p>Modal pencere içeriği</p>
</div>
<div class="pencere-foot">
<p>modal pencere footer</p>
</div>
</div>
</div>
Yukarıdaki kodlarla birlikte modal pencerenin %50 sini hazırlamış oluyoruz. Şimdi bu HTML alanı düzenlemek için CSS kodlarını ekleyelim.
Açılır Pencere CSS Bölümü
Bu bölümde de, yukarıda haırlamış olduğumuz HTML kodlarının CSS ile düzenlenmesini sağlayacağız. Basit bir şekilde düzenleme yapacağız. Bu alanı dilediğiniz gibi değiştirebilirsiniz.
<style>
.pencere {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.6);
}
.pencere-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.pencere-head {
padding: 2px 16px;
background-color: #DF9881;
color: white;
}
.pencere-main {
padding: 2px 16px;
}
.pencere-foot {
padding: 2px 16px;
background-color: #58949C;
color: #ffffff
}
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0} to {top:0; opacity:1}
}
.kapat {
color: white;
float: right;
font-size: 28px;font-weight: bold;
}
.kapat:hover, .kapat:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
Yukarıdaki kodlarla birlikte, HTML ve CSS alanını hazırlamış olduk. %90 olarak modal pencereyi tamamlamış oluyoruz. Animayon ve düzenleme işleminin çoğunu CSS ile gerçekleştirdik.
Açılır Pencere JAVASCRİPT Bölümü
Bu bölümde de modal pencerenin X tuşuna basıldığında, pencerenin kapatılmasını sağlayacağız. Bu işlemi de basit bir şekilde style tanımlaması yaparak gerçekleştireceğiz.
<script>
var mpopup = document.getElementById('pencereKutu');
var mpLink = document.getElementById("pencereLink");
var close = document.getElementsByClassName("kapat")[0];
mpLink.onclick = function() {
mpopup.style.display = "block";
}
close.onclick = function() {
mpopup.style.display = "none";
}
window.onclick = function(event) {
if (event.target == mpopup) {
mpopup.style.display = "none";
}
}
</script>
Böylelikle modal pencere örneğini bitirmiş oluyoruz. Yukarıda yer alan kodları yazmanız durumunda modern bir açılır pencere oluşturmuş olacaksınız. Bu pencereyi aşağıdaki durumlarda kullanabilirsiniz.
- Reklam gösterimi için,
- Form işlemleri (üyelik, iletişim, şifre unuttum gibi..) için,
- Durum bildirimleri için,
- İşlem sonrası geri bildirimler için kullanabilirsiniz.
Yukarıda yer alan durumları dilediğiniz gibi arttırabilirsiniz.
