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

秒速五厘米 2023-10-01 17:22 13阅读 0赞

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

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

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

演示

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

<!DOCTYPE html>
    <html>
    <head>
    <title>Simple HTML <dialog> : Demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
    <style type="text/css">
    
    body {
    	margin: 0px;
    	font-family: Roboto, Tahoma;
    	font-size: 14px;
    }
    
    #simple-dialog {
    	width: 500px;
    	border: 1px solid #555555;
    }
    
    #simple-dialog::backdrop {
    	background: rgba(0,0,0,0.5);
    }
    
    #show-dialog-button {
    	background-color: white;
    	color: #336699;
    	cursor: pointer;
    	padding: 10px;
    	font-family: inherit;
    	font-size: inherit;
    	border: 2px solid #336699;
    	font-weight: 700;
    	display: block;
    	width: 200px;
    	margin: 50px auto;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="main-container">
    	<dialog id="simple-dialog">
    		<p>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.</p>
    	</dialog>
    	<button id="show-dialog-button">See Instructions</button>
    </div>
    
    
    <script>
    
    document.querySelector("#show-dialog-button").addEventListener('click', function() {
    	document.querySelector("#simple-dialog").showModal();
    });
    
    </script>
    
    </body>
    </html>

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

<!DOCTYPE html>
    <html>
    <head>
    <title>HTML <dialog> with Form : Demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
    <style type="text/css">
    
    body {
    	margin: 0px;
    	font-family: Roboto, Tahoma;
    	font-size: 14px;
    }
    
    #form-dialog {
    	width: 500px;
    	border: 1px solid #555555;
    }
    
    #form-dialog::backdrop {
    	background: rgba(0,0,0,0.5);
    }
    
    #form-dialog form {
    
    }
    
    .form-element {
    	margin: 0 0 30px 0;
    }
    
    .form-element label {
    	display: block;
    	width: 100%;
    	margin: 0 0 5px 0;
    }
    
    .form-element input[type="text"] {
    	display: block;
    	width: 100%;
    	font-size: inherit;
    	font-family: inherit;
    	padding: 10px;
    	border: 1px solid #cccccc;
    	outline: none;
    	box-sizing: border-box;
    }
    
    .form-element select {
    	display: block;
    	width: 100%;
    	font-size: inherit;
    	font-family: inherit;
    	padding: 10px;
    	border: 1px solid #cccccc;
    	background-color: white;
    	outline: none;
    	box-sizing: border-box;
    }
    
    .form-element textarea {
    	display: block;
    	width: 100%;
    	font-size: inherit;
    	font-family: inherit;
    	padding: 10px;
    	border: 1px solid #cccccc;
    	outline: none;
    	resize: none;
    	height: 200px;
    	box-sizing: border-box;
    }
    
    #submit-button {
    	background-color: #336699;
    	color: white;
    	cursor: pointer;
    	padding: 10px 15px;
    	font-family: inherit;
    	font-size: inherit;
    	border: none;
    	font-weight: 700;
    	display: inline-block;
    	vertical-align: middle;
    	margin: 0 30px 0 0;
    }
    
    #close-button {
    	background-color: white;
    	cursor: pointer;
    	font-family: inherit;
    	font-size: inherit;
    	border: none;
    	display: inline-block;
    	vertical-align: middle;
    }
    
    #fill-form-button {
    	background-color: white;
    	color: #336699;
    	cursor: pointer;
    	padding: 10px;
    	font-family: inherit;
    	font-size: inherit;
    	border: 2px solid #336699;
    	font-weight: 700;
    	display: block;
    	width: 200px;
    	margin: 50px auto;
    }
    
    #form-status {
    	text-align: center;
    	font-weight: 700;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="main-container">
    	<dialog id="form-dialog">
    		<form>
    			<div class="form-element">
    				<label>Name</label>
    				<input type="text" name="name" />
    			</div>
    			<div class="form-element">
    				<label>Email</label>
    				<input type="text" name="email" />
    			</div>
    			<div class="form-element">
    				<label>Gender</label>
    				<select name="gender">
    					<option value="M">Male</option>
    					<option value="F">Female</option>
    				</select>
    			</div>
    			<div class="form-element">
    				<label>Address</label>
    				<textarea name="address"></textarea>
    			</div>
    			<button type="button" id="submit-button">Submit</button>
    			<button type="button" id="close-button">Close</button>
    		</form>
    	</dialog>
    	<button id="fill-form-button">Fill Form</button>
    	<div id="form-status"></div>
    </div>
    
    
    <script>
    
    var SHOW_FORM_BUTTON = document.querySelector("#fill-form-button"),
    	DIALOG = document.querySelector("#form-dialog"),
    	FORM_SUBMIT_BUTTON = document.querySelector("#submit-button"),
    	FORM_CANCEL_BUTTON = document.querySelector("#close-button"),
    	FORM_STATUS = document.querySelector("#form-status");
    
    // show dialog
    SHOW_FORM_BUTTON.addEventListener('click', function() {
    	DIALOG.showModal();
    });
    
    // form submission is cancelled
    FORM_CANCEL_BUTTON.addEventListener('click', function() {
    	DIALOG.close('CANCELLED');
    });
    
    // when form is submitted
    FORM_SUBMIT_BUTTON.addEventListener('click', function() {
    	// write code here for form submission with ajax
    
    	// when ajax form submission is successful
    	DIALOG.close('SUBMITTED');
    });
    
    // fired when dialog is closed
    DIALOG.addEventListener('close', function() {
    	if(DIALOG.returnValue === 'SUBMITTED')
    		FORM_STATUS.textContent = 'Form is submitted';
    	else if(DIALOG.returnValue === 'CANCELLED')
    		FORM_STATUS.textContent = 'Form submission is cancelled';
    });
    
    // cancel effect of ESC key
    DIALOG.addEventListener('cancel', function(e) {
    	e.preventDefault();
    });
    
    </script>
    
    </body>
    </html>

<dialog> HTML 标签

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

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

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

[1]: http://usefulangle.com/demos/110/dialog-simple.html
[2]: http://usefulangle.com/demos/110/dialog-form.html