带有 HTML5 ＜dialog＞ Tag的原生弹出窗口对话框

对话框和灯箱广泛用于网站和应用程序。在此之前，它们需要定制——使用一系列

来创建容器，设置对话框的 CSS 使其居中，并使用 Javascript 事件处理程序来显示/隐藏模式框。

现在，浏览器引入了新的

标签，可以更轻松地创建对话框和灯箱。使用 Javascript，您可以调用方法来打开或关闭对话框，或者通过事件知道对话框何时关闭。

使用

标签，预计在创建模态框时可以减少 50% 的工作量。

演示

演示#1
这个演示显示了一个向用户显示一些信息的对话框。

	

		
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	
	See Instructions

演示#2
该演示在对话框中显示了一个表单。

	

		

			

				Name
				
			
			

				Email
				
			
			

				Gender
				
					Male
					Female
				
			
			

				Address
				
			
			Submit
			Close
		
	
	Fill Form
	

HTML 标签

< dialog>元素可用于创建弹出窗口或模式框。

	
Hello world !

	

		Name
		
		Submit
	

打开对话框

showModal方法打开一个对话框。

	
Hello world !

document.querySelector("#modal-dialog").showModal()

关闭对话框

close方法关闭一个对话框。

document.querySelector("#modal-dialog").close()

此外，还可以将参数传递给close方法。该值可以通过对话框的returnValue属性访问。

document.querySelector("#modal-dialog").close('SUBMITTED');

// outputs 'SUBMITTED'
console.log(document.querySelector("#modal-dialog").returnValue);

知道对话框何时关闭

关闭对话框时会触发关闭事件。使用它在事件处理程序中编写代码。

var DIALOG = document.querySelector("#modal-dialog");

// fired when dialog is closed
DIALOG.addEventListener('close', function() {
	if(DIALOG.returnValue === 'SUBMITTED')
		alert('Form is submitted');
	else if(DIALOG.returnValue === 'CANCELLED')
		alert('Form submission is cancelled');
});

// assuming form inside dialog was cancelled by user
DIALOG.close('CANCELLED');

// assuming form inside dialog was submitted successfully
DIALOG.close('SUBMITTED');

ESC键的作用

默认情况下，如果用户按下键盘上的 ESC 键，对话框将关闭。

但是，按下 ESC 键也会触发取消事件。您可以取消该事件，以便在按下 ESC 键时不会关闭对话框。

// cancel effect of ESC key
document.querySelector("#modal-dialog").addEventListener('cancel', function(e) {
	e.preventDefault();
});

为对话框添加背景颜色

CSS ::backdrop选择器可用于在对话框打开时显示背景颜色。

#modal-dialog::backdrop {
	background: rgba(0,0,0,0.5);
}

结论

元素消除了创建自定义对话框或灯箱背后的大部分艰苦工作。这确实是一个非常有用的补充。