如何使用 dialog 标签创建 HTML 模态对话框

对话框和灯箱广泛用于网站和应用程序。在此之前，它们需要定制——使用一系列<div>来创建容器，设置对话框的 CSS 使其居中，并使用 Javascript 事件处理程序来显示/隐藏模式框。

现在，浏览器引入了新的<dialog>标签，可以更轻松地创建对话框和灯箱。使用 Javascript，您可以调用方法来打开或关闭对话框，或者通过事件知道对话框何时关闭。

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

演示

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

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

<dialog> HTML 标签

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

<!-- simple dialog -->
<dialog>
	<p>Hello world !</p>
</dialog>

<!-- dialog with form -->
<dialog>
	<form method="dialog">
		<label>Name</label>
		<input type="text" name="name" />
		<button>Submit</button>
	</form>
</dialog>

打开对话框

showModal方法打开一个对话框。

<dialog id="modal-dialog">
	<p>Hello world !</p>
</dialog>

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);
}

结论

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

如何使用 dialog 标签创建 HTML 模态对话框

猜你喜欢