Tạo Popup và Modal bằng phần tử "dialog" của HTML5

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Nhiều quá trình trên các trang web ngày nay đòi hỏi sự đồng ý từ người dùng để có thể hoàn tất. Ví dụ, người dùng có thể cần phải loại bỏ một tài khoản, thay đổi tên người dùng của họ hoặc xác nhận một giao dịch tiền tệ.

Một cách tiếp cận UX phổ biến trong trường hợp này là hiển thị một hộp thoại, thông thường với hai nút; một cho việc hủy bỏ và một cho việc thực hiện tiếp. Chúng ta đã dựa vào các thư viện JavaScript để làm điều này trong nhiều năm, tuy nhiên trong bài này chúng ta sẽ làm những điều đó bằng phần tử <dialog>.

Sử dụng phần tử Dialog

<dialog> là một phần tử của HTML5 (chính xác là 5.1). Nó được phân loại như là một "sectioning root", tương tự như <body>, <blockquote>, và các phần tử <details>, mỗi phần tử đó thiết lập một phần nội dung mới một cách độc lập. Bạn có thể đặt nó như là một phần tử con của body, hoặc lồng bên trong một phần tử như <div> hoặc <section>—cả hai cách đều hợp lệ.

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

	<dialog></dialog>	
</body>

Các trình duyệt có hỗ trợ (Chrome 37+ và Opera 27+) sẽ kết xuất phần tử <dialog> ẩn theo mặc định, chỉ làm cho nó hiện lên theo yêu cầu với JavaScript bằng cách sử dụng phương thức show() hoặc showModal(), và close() để ẩn nó một lần nữa. Thông thường, chúng ta sẽ chạy phương thức này bên trong một sự kiện click, giống như:

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

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

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

Phương thức `show()` và `showModal()`

Đáng chú ý là, phương thức show() và showModal() hành xử một cách khác nhau.

Phương thức show() hiển thị phần tử ngay vị trí tương đối của nó trong DOM. Nếu bạn thêm nó ngay trước thẻ đóng của phần tử body, nó có thể xuất hiện ở dưới cùng của trang web. Chúng ta sẽ phải thêm các phong cách tùy biến để điều chỉnh vị trí của nó, ví dụ, nếu chúng ta muốn đặt nó ở giữa trang. Những phong cách này thông thường sẽ sử dụng z-index để sắp xếp phần tử bên trên các phần tử khác, thuộc tính position được thiết lập thành absolute, cùng với left và top.

Mặc khác, phương thức showModal(), sẽ hiển thị phần tử như là một modal. Nó sẽ được hiển thị ở giữa của trang theo mặc định, và nó nằm ở trên cùng, giống như fillScreen API, nó loại bỏ tác dụng của z-index, relative và overflow của phần tử cha.

Trong hầu hết các trường hợp, chúng ta sẽ sử dụng showModal() thay vì phương thức show().

Tùy biến các phong cách

Hộp thoại mang phong cách mặc định của trình duyệt có thể được thay thế một cách dễ dàng giống như hầu hết các phần tử khác. Ví dụ, bạn có thể làm cho viền của hộp thoại mỏng hơn, làm cho các góc được làm tròn và thêm hiệu ứng bóng đổ.

Ngoài ra, khi phần tử <dialog> được hiển thị như là một modal (sử dụng phương pháp showModal()), chúng ta có thêm một phần tử giả, ::backdrop. Phần tử giả ::backdrop nằm ngay bên dưới hộp thoại, bao phủ toàn bộ viewport và các phần tử còn lại ở bên dưới.

Thường định phong cách backdrop với một màu đen, độ trong suốt thấp—hãy nhấp vào nút màu đỏ để xem nó hoạt động như thế nào:

Thêm hiệu ứng với Transition

Tuỳ biến phong cách cho hộp thoại thì đơn giản, nhưng việc thêm CSS Transition thì như thế nào? Làm thế nào để chúng ta hiển thị hộp thoại một cách từ từ, bằng cách sử dụng một hiệu ứng scale, như bạn thường thấy trong hệ điều hành Mac OS X.

Bước 1

Để bắt đầu, chúng ta sẽ giảm kích thước hộp thoại xuống 90%, xác định Transition, và tạm thời giấu nó đi.

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

Bước 2

Bây giờ chúng ta định nghĩa một lớp chọn mà sẽ phóng to hộp thoại lên kích thước ban đầu của nó đồng thời hiển thị nó.

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

Bước 3

Bí quyết của chúng ta bây giờ là chúng ta sẽ "giữ" hộp thoại ở kích thước nhỏ trong một vài mili giây trước khi chúng ta thêm lớp dialog-scale. Để đạt được điều này, chúng ta sử dụng phương thức setTimeout() của JavaScript để thêm lớp:

var transition;

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

Bước 4

Đừng quên loại bỏ lớp này và xoá timeOut khi hộp thoại được đóng lại.

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

Chúng ta đã thiết lập xong! Bạn có thể thử nó trong demo dưới đây:

Tổng kết

Phần tử <dialog> thật sự tiện dụng, mặc dù vẫn còn rất ít trình duyệt hỗ trợ. Nếu và khi tất cả các trình duyệt chính cài đặt nó, chúng ta sẽ ít phụ thuộc vào các thư viện, cấu trúc nội dung của chúng ta sẽ có nhiều ngữ nghĩa hơn, tăng khả năng truy xuất, và chúng ta sẽ có một cách làm tiêu chuẩn trong việc đưa ra các hộp thoại modal.

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

Cho đến lúc đó, bạn có thể sử dụng polyfill từ Google Chrome để mô phỏng nó trong những trình duyệt không hỗ trợ.