整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML对话框已经停留了一段时间，但是直到最近，它还不是W3C推荐规范的一部分。既然主流浏览器已经开始支持对话元素，我们很可能会看到它被广泛使用。本文简要介绍了我们如何使用对话框，为什么需要新的元素以及如何使用它。
对话框是一种可用于多种方式的设计模式，包括但不限于：显示重要信息，请求用户选择或扩展现有内容。虽然对话可以以不同的方式进行，但是最常用的是模态，与叠加层中的其他内容隔离。
直到新元素发布，要实现一个对话框到一个网站，你将不得不从头开始编写或使用外部库 - 这种组件没有标准的语法或默认样式。缺乏标准意味着浏览器和屏幕阅读器等辅助技术默认情况下无法区分对话框相关内容和其他页面内容。
为了解决可访问性问题，开发人员必须使用aria属性（如role =“dialog”）来描述对话框中的内容。正确管理键盘焦点对于使用对话框的可访问性也很重要，例如，对话框中必须至少有一个可调焦的控件。
一些伟大的库被创建，使开发者更容易实现可访问的对话框，比如Edenspiekermann的A11y Dialog。除了这样的库之外，像Bootstrap和Foundation这样的CSS框架也使得它们内置的模式/对话框变得可用。
尽管今天这些库和框架仍然是相关的和有用的，但是具有用于对话的本地HTML元素确保了这样的经常使用的设计模式对于每个人都是很好的语法，标准和可访问性。另外，在浏览器中内置对话逻辑可以节省那些宝贵的代码字节！
现在我们明白为什么需要这个了，我们来看看我如何使用对话框元素。
对话框元素的标记就像在<dialog>标签中包装一些内容一样简单。为了使对话框起作用，我们需要一个按钮来打开它，还有一个按钮可以关闭或者撤销它。
要使对话框默认打开，可以添加一个打开的属性。
如果您的对话框包含一个表单，则表单元素的方法属性应设置为对话框。
没有JavaScript，对话元素将不会交互。我们可以将上面的HTML例子中的按钮和对话框元素连接到一些点击事件监听器。
就是这样，我们有一个可以正常运行本地化的对话框！
对话框元素的默认样式不会适合每个人的口味......比较幸运的是，我们可以用CSS来设计样式。
还有一个backdrop可以帮助我们选择不同的背景
完整demo演示如下：
早在2014年，Chrome和Opera就开始支持对话元素，最近又推出了Chrome Android和三星浏览器。它也支持Firefox，但必须通过about：config启用。尽管有几个主要的浏览器不支持dialog，但有一个很好的polyfill可用。
JavaScript中有三种样式的对话框，分别起到提示、确认和输入的作用，对应三种函数：alert、confirm、prompt
alert：该对话框只用于提醒，不能对脚本产生任何变化，他只有一个参数，即为需要提示的信息，没有返回值。
confirm：该对话框一般用于确认信息。他只有一个参数，返回值为true或false。
prompt：该对话框可以进行输入，并返回用户输入的字符串。他有两个参数，第一个参数显示提示信息，第二个参数显示输入框（和默认值）。
前端学习，就上以人为本前端学习网！www.yirenweiben.com
Example：
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>三种弹出对话框的用法实例</title>
<script language=”JavaScript”>
function ale(){
alert(“嘿嘿，演示一完毕”);
}
function firm(){
if(confirm(“确定跳转到“以人为本前端学习”？”)){
// 这是在本窗口打开
// location.href=”http://www.yirenweiben.com”;
// 新窗口打开
window.open(“http://www.yirenweiben.com/”,”_blank”);
}else{
alert(““以人为本前端学习”的网址是www.yirenweiben.com欢迎常来!”);
}
}
function prom(){
var name = prompt(“请输入您的名字”,”张三”);
if (name != null & name!=””){
alert(“欢迎您：” + name);
}else{
alert(“请输入您的名字！”);
}
}
</script>
</head>
<body>
<p>对话框有三种</p>
<p>1：只是用于提醒，不能对脚本产生任何改变；</p>
<p>2：一般用于确认，返回true或者false；</p>
<p>3：一个带输入的对话框，可以返回用户填入的字符串</p>
<p>下面我们分别演示：</p>
<p>演示一：提醒对话框</p>
<input type=”submit” value=”提交” onclick=”ale()”>
<p>演示二：确认对话框</p>
<input type=”submit” value=”提交” onclick=”firm()”>
<p>演示三：要求用户输入，然后给个结果</p>
<input type=”submit” value=”提交” onclick=”prom()”>
</body>
</html>
TML 的内容远不止 <div> 、<a>和 <p> 。如此多更复杂、更强大的标签，你可能从未使用过。具有从交互式图像到复杂的 UI 组件的有趣功能。
但是，接下来就是 meter -- 也被称为 progress 在横行：
dfn -- 用于我们将在页面中定义的任何内容：
原生 HTML 对话框！
们称这样的可点击图片为图像地图。
超级神秘的缩写在这里，它是做什么的？
<a> 使用页面的域名来获取他们将导航您的完整 URL：
但是，当你在 HTML 中创建一个基础的 <base> 会发生什么？
现在他们都使用 <base> 的 href 中的硬编码值来获取完整的 URL：
像 Angular 和 Flutter Web 这样的框架也在使用它：
对于日期和时间：
<hgroup> 表示标题标签和下面的一些内容是相关的
代表键盘输入：
表示书籍、歌曲、电影或其他创作作品的标题：
所以，这些是 HTML 中最不为人知和使用的 10 个标签。尽管使用率低，但在各种情况下都非常有用。
*请认真填写需求信息，我们会在24小时内与您取得联系。
