Native Popups dan Modals dengan Elemen "dialog" HTML5

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Banyak proses di web hari ini memerlukan persetujuan penuh dari pengguna untuk diselesaikan. Misalnya, pengguna mungkin butuh menghapus akun, mengubah username mereka atau konfirmasi transaksi moneter.

Pendekatan UX umum dalam kasus tersebut adalah menampilkan kotak dialog, biasanya dengan dua tombol; satu untuk membatalkan dan satu untuk melanjutkan dengan tindakan. Kami telah mengandalkan library JavaScript untuk melakukan ini selama bertahun-tahun, namun dalam tutorial ini kita akan melakukan hal-hal secara native dengan percobaan elemen <dialog>.

Menggunakan Elemen Dialog

<dialog> adalah elemen HTML5 (tepatnya 5.1). Ia diklasifikasikan sebagai "sectioning root", mirip dengan <body>, <blockquote>, dan elemen-elemen <details>, yang masing-masing menetapkan bagian konten baru secara independen. Anda bisa menempatkannya sebagai anak dari body, atau menyarangkannya dalam elemen seperti <div> atau <section> - kedua pendekatannya sah.

<body>
  
	<div>
		<dialog></dialog>
	</div>
	
	<section>
		<dialog></dialog>
	</section>

	<dialog></dialog>	
</body>

Mendukung browser (Chrome 37+ dan Opera 27+) secara default akan me-render elemen <dialog> tersembunyi, hanya membuatnya terlihat berdasarkan permintaan dengan JavaScript menggunakan show() atau showModal(), dan metode close() untuk menyembunyikannya lagi. Biasanya, kami akan menjalankan metode ini dalam event click, seperti:

var $accountDelete = $('#delete-account'),
    $accountDeleteDialog = $('#confirm-delete');

	  $accountDelete.on('click', function() {
	    $accountDeleteDialog[0].showModal();
	  });

	  $('#cancel').on('click', function() {
	    $accountDeleteDialog[0].close();
	  });

Metode `show()` vs `showModal()`

Patut dicatat bahwa show() dan showModal() berperilaku berbeda.

Metode show() mengungkapkan elemen sesuai posisinya di aliran DOM. Jika Anda menambahkannya tepat sebelum tag penutup body, mungkin muncul di bagian bawah halaman web. Kami akan menambah style yang dikustomisasi untuk menyesuaikan posisinya, sebagai contoh, jika kita ingin menempatkannya di tengah halaman. Style ini biasanya akan menggunakan z-index untuk menumpuk elemen di atas elemen-elemen lain, properti position diatur absolute, bersamaan left dan top.

Metode showModal(), di sisi lain, akan menampilkan elemen sebagai modal. Itu akan ditampilkan di tengah halaman secara default, dan berada di lapisan atas, seperti API fullScreen yang mencegah terganggu oleh z-index, posisi relatif dan overflow dari elemen induk

Dalam kebanyakan kasus, ada kemungkinan bahwa kita akan menggunakan kenyamanan dari showModal() bukan metode show().

Mengkustomisasi Style

Kotak dialog membawa style default browser yang dapat dengan mudah diganti seperti kebanyakan elemen-elemen lain. Anda bisa, misalnya, membuat border kotak dialog lebih tipis, membuat sudut-sudut bulat, dan tambahkan drop shadow.

Selain itu, ketika elemen <dialog> ditampilkan sebagai modal (menggunakan metode showModal()), kita memiliki pseudo-element tambahan, ::backdrop. Elemen ::backdrop berada langsung di bawah kotak dialog, menutupi seluruh viewport dan seluruh elemen di bawahnya.

Hal ini umum untuk men-style latar belakang dengan opacity rendah warna gelap–klik tombol merah untuk melihatnya dalam aksinya:

Menambahkan Kepandaian dengan Transisi

Kustomisasi style kotak dialog harus langsung, tapi bagaimana dengan menambahkan transisi CSS? Bagaimana kita secara bertahap mengungkapkan kotak dialog, menggunakan efek skala, kurang lebih sebagaimana OS X melakukan hal itu?

Langkah 1

Untuk memulainya, kita akan skala dialog ke 90%, menentukan transisi, dan menghilangkannya dari pandangan.

dialog {
	visibility: hidden;
	transform: scale(0.1);
	transition: transform 200ms;
}

Langkah 2

Sekarang kita mendefinisikan kelas selector yang akan men-skala ukuran kotak dialog yang diinginkan dan membuatnya terlihat.

1	dialog.dialog-scale {
2	visibility: visible;
3	transform: scale(1);
4	}

Langkah 3

Trik kami sekarang adalah kita akan "memegang" kotak dialog di skala kecilnya untuk beberapa milidetik sebelum kita tambahkan kelas dialog-scale. Untuk mencapai hal ini kami menggunakan metode JavaScript setTimeout() untuk menambahkan kelas:

var transition;

$accountDelete.on('click', function() {
	$accountDeleteDialog[0].showModal();
	transition = setTimeout(function() {
	    $accountDeleteDialog.addClass('dialog-scale');
	}, 0.5);
});

Langkah 4

Jangan lupa untuk menghapus kelas ini dan membersihkan timeOut ketika kotak dialog ditutup.

$('#cancel').on('click', function() {
	$accountDeleteDialog[0].close();
	$accountDeleteDialog.removeClass('dialog-scale');
	clearTimeout(transition);
});

Kita sudah siap! Anda dapat mencobanya di demo berikut:

Kesimpulan

<dialog> benar-benar berguna, meskipun masih sangat miskin dalam hal dukungan browser. Jika dan ketika semua browser utama telah menerapkannya, kita akan menjadi kurang bergantung pada library, struktur konten kami akan lebih semantik, dapat diakses dengan benar oleh teknologi bantuan, dan kita akan memiliki cara standar dalam memberikan modal dialog.

caniuse dialog — http://caniuse.com/#feat=dialog

Sampai saat itu, Anda dapat menggunakan polyfill dari Google Chrome untuk mensimulasikan di browser yang tidak-mendukung.