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

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

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

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

演示

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


<!DOCTYPE html>
<html>
<head>
<title>Simple HTML &lt;dialog&gt; : 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
该演示在对话框中显示了一个表单。


<!DOCTYPE html>
<html>
<head>
<title>HTML &lt;dialog&gt; 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 successfulDIALOG.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>元素可用于创建弹出窗口或模式框。

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

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

原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
dialog - JS弹出窗口
原文地址为: dialog - JS弹出窗口请先调用dialog JS var diag = new Dialog(); //窗体大小 diag.Width = 300; diag.Height = ...
html5 popup,popup.js-jQuery和CSS3可互动的3D弹出窗口插件
popup.js是一款使用jQuery和CSS3制作并可以使用鼠标进行互动的3D弹出窗口插件.该3D弹出窗口插件使用简单,并且在旧的浏览器中会回退为非3D状态,兼容IE8+的所有现代浏览器. 使用方法 ...
selenium禁止弹窗_python：使用带有selenium的firefox时禁用下载弹出窗口
我有使用selenium和firefox自动执行下载操作的脚本. 问题是每当我运行这个脚本时,我总是从firefox弹出,不停地问我想做什么样的操作,即使我在firefox首选项中设置了下载路径.我检 ...
原生html页面弹窗_javascript原生弹出框
提到弹出框,首先想到的alert()了,其次想到的也还是alert(),其实在js中有三种弹出框,下面我们一一说明. 1.仅确定. 即:对话框界面上只有确定按钮.该功能可以使用alert()方法实现. ...
QuickContact分析及其弹出窗口实现
一.简介 QuickContact是为了应用程序能够快速方便的访问联系人,并且快速的运用联系人的信息执行相应操作而设计的.最常见的在Contacts应用程序中如下图所示: 在Activity中 ...
idf和adf_ADF：弹出窗口，对话框和输入组件
idf和adf 在本文中,当我们有一个af:popup包含af:dialog并在其中包含输入组件时,我想重点介绍一个非常常见的用例. 实现此用例时,需要注意一些陷阱. 让我们考虑一个简单的示例: &l ...
ADF：弹出窗口，对话框和输入组件
在本文中,当我们有一个af:popup包含af:dialog并在其中包含输入组件时,我想着重介绍一个非常常见的用例. 在实现此用例时,需要注意一些陷阱. 让我们考虑一个简单的示例: <af:po ...
EPUB弹出窗口式脚注
网上搜到一些国学典籍的EPUB版,虽有古人的注解,但正文和注解混排在一起,当我只想迅速读正文的时候比较碍眼.于是研究了一下 EPUB3 中有关脚注(footnote)的规格定义,写了一个 Python ...

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

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

最新文章

热门文章