HTML5 “dialog” elementiyle Popup ve Modal yapma
İçindekiler
Günümüzde web siteler üzerinde birçok işlem tamamlanabilmesi için kullanıcılardan tam onay beklemektedir. Örneğin; kullanıcıların bir hesabını kaldırması, kullanıcı adlarını değiştirmeleri veya parasal işlemlerini onaylamaları gerekebilir.
Bunun gibi durumlarda yaygın olarak kullanılan UX yaklaşımı genellikle iki button bulunan bir iletişim kutusu görüntülenmektedir; Biri iptal etmek ve diğeride yapılan eylemi doğrulamak içindir. Bunu gerçekleştirmek için yıllardır JavaScript kütüphanelerine güveniyorduk lakin bu yazımızdan sonra artık bu tarz onaylamaları <dialog> elementi yardımı ile yapacağız.
1.Dialog elementini kullanma
<dialog> elementi HTML5(kesin olarak HTML 5.1) ile yeni gelen elementlerdendir. Bağımsız olarak yeni bir içerik bölümü oluşturan <body>, <blockquote> ve <details> elementlerine benzer “bölümleme kökü” olarak sınıflandırılmıştır. <body> elementinin bir çocuğu olarak yerleştirilebilir veya <div> yada <section> elementleri içine yerleştirilebilir.
<body>
<div>
<dialog></dialog>
</div>
<section>
<dialog></dialog>
</section>
<dialog></dialog>
</body>
Destekleyen tarayıcılar(Chrome 37+ ve Opera 24+) <dialog> elementini varsayılan olarak gizli hale getirir.
Kullanıcının isteği üzerine show() veya showModal() kullanılarak JavaScript ile istek üzerine görünür hale getirilir. Tekrar gizlemek için close() yöntemi kullanılır. Aşağıdaki örnek gibi bu yönetimi tek tıklama olayı içinde çalıştıracağız.
var $accountDelete = $('#delete-account'),
$accountDeleteDialog = $('#confirm-delete');
$accountDelete.on('click', function() {
$accountDeleteDialog[0].showModal();
});
$('#cancel').on('click', function() {
$accountDeleteDialog[0].close();
});
[mks_icon icon=”fa-bolt” color=”#dd3333″ type=”fa”] show() ve showModal() methodları
Öncelikle show() ve showModal() yöntemlerinin işlevlerinin farklı davranışlar gösterdiğini belirtmek gerekiyor.
show() yöntemi, elementi DOM akışındaki konumuna göre gösterir. <body> kapanış etiketinin hemen öncesine eklediyseniz, web sayfasının alt kısmında görünebilir. Konumunu istediğimiz gibi ayarlamak için özelleştirilmiş stiller ekleyebiliriz. Örnek verecek olursak sayfayı ortalamış olarak açılmasını sağlayabiliriz. Genellikle bir elementi bir elementin üstünde tutmak için z-index kullanılır. Elementin position özelliği left ve top yapmakla birlikte absolute olarak ayarlanır.
See the Pen Native Popups and Modals With HTML5’s “dialog” Element (demo 1) by Fatih (@fatihozel) on CodePen.
Bunun yanısıra showmodal() yöntemi ise bir elementi bir modal gibi görüntüler. Varsayılan olarak sayfanın tam ortasında gösterilir ve z-index ile önlem almamızın önüne geçip ana elementin position özelliği relative ve overflow olarak tam ekran API’si gibi üst katmanda bulunması sağlanır.
See the Pen Native Popups and Modals With HTML5’s “dialog” Element (demo 2) by Fatih (@fatihozel) on CodePen.
Çoğu durumda show() yöntemi yerine showModal()‘ın kullanışlığı işimize yarayacaktır.
2.Stilleri özelleştirme
Yukarıda örneklerde olduğu gibi iletişim kutuları tarayıcıların varsayılan stilini alır. Kullanıcıların ilgisini çekecek nitelikte daha düzenli iletişim kutuları yapabiliriz. Örneğin; iletişim kutusunun kenar çizgisini daha ince yapabilir, köşeleri yuvarlak ve gölge ekleyebiliriz.
<dialog> elementi bir modal olarak gösterildiğinde(showModal() yöntemini kullanarak), ek olarak pseudo-elementinin ::backdrop elimizde bulunması işimize çok yarayacaktır. ::backdrop elementi iletişim kutusunun hemen altında bulunan bir katman gibi düşünebiliriz. Hangi element ile kullanırsak kullanalım onun alt katmanını kapsayacaktır. Örneğin; bir elementin arkaplanı olarak kullanabiliriz.
Aşağıdaki örneğimizde iletişim kutusu geldiği zaman arka plan hafif kararıyor ve böylelikle iletişim kutusu daha çok ön plana çıkıyor.
See the Pen Native Popups and Modals With HTML5’s “dialog” Element (demo 3) by Fatih (@fatihozel) on CodePen.
3.Geçiş efekti kazandırma
İletişim kutusu stillerini özelleştirme basit olmalıdır. CSS ile geçiş efekti eklemek nasıl olur sizce? Kademeli olarak geçiş efektiyle iletişim kutumuzu daha çok açığa çıkarmak oldukça iyi olacaktır.
[mks_icon icon=”fa-check-square-o” color=”#dd3333″ type=”fa”]Adım 1
Dialog penceremizin ölçeklendirilmesini ilk örneğimizdeki gibi değil biraz daha gözle görülür hale getirmeliyiz. O yüzden ölçeklendirmesini %90 oranında azalttık. Geçiş süresi tanımladık ve visibility özelliğiyle penceremizi gizledik.
dialog {
visibility: hidden;
transform: scale(0.1);
transition: transform 200ms;
}[mks_icon icon=”fa-check-square-o” color=”#dd3333″ type=”fa”]Adım 2
Şimdi iletişim kutusunu istenilen boyutta görünür hale getiren bir class selector tanımlıyoruz.
dialog.dialog-scale {
visibility: visible;
transform: scale(1);
}[mks_icon icon=”fa-check-square-o” color=”#dd3333″ type=”fa”]Adım 3
dialog-scale sınıfını eklemeden önce iletişim kutusunu birkaç milisaniyelik bir küçük ölçekte tutacağız. Bunu gerçekleştirmek için JavaScript setTimeout() sınıfını yöntemini kullanıyoruz.
var transition;
$accountDelete.on('click', function() {
$accountDeleteDialog[0].showModal();
transition = setTimeout(function() {
$accountDeleteDialog.addClass('dialog-scale');
}, 0.5);
});[mks_icon icon=”fa-check-square-o” color=”#dd3333″ type=”fa”]Adım 4
Bir önceki adımdaki sınıfı kaldırmayı ve iletişim kutusu kapatıldığında timeOut‘u temizlemeyi unutmamalıyız.
$('#cancel').on('click', function() {
$accountDeleteDialog[0].close();
$accountDeleteDialog.removeClass('dialog-scale');
clearTimeout(transition);
});See the Pen Native Popups and Modals With HTML5’s “dialog” Element (demo 4) by Fatih (@fatihozel) on CodePen.
Sonuç
<dialog> elementi aslında çok kullanışlı lakin tarayıcı desteği konusunda hala çok yalnız kalmış bulunuyor. HTML 5.1 ile beraber yeni standart hale geldi. Bununla birlikte bir hareketlenme olur gibi geliyor.
Eğer tüm tarayıcılar bunu desteklerse kütüphanelere daha az bağımlı olacağız. İçerik yapımız daha anlamlı hale gelecektir. Gerektiğinde yardımcı teknolojilere erişeceğiz ve modal dialog sunmanın standart bir yolunu bulacağız.
Ne iş yaparsanız yapın işin mutfağını öğrenmek sizi her zaman farklı kılacaktır. Umarım faydalı olmuştur. Herkese iyi çalışmalar diliyorum. Webmaster Mutfakta işin mutfağını öğrenin. 😉
