保定开发网站：创建本机HTML 5对话框Windows

对话框窗口是网站用户界面设计中最常用的元素之一。它用于多种用途，包括显示通知、携带订阅表单、提醒错误/警告以及提请访问者注意重要的信息片段。当对话框窗口设计有效且使用得当时，可以简化用户的任务。

以前，创建对话框窗口需要使用jQuery插件，如通俗, jQueryUI对话框，或Twitter Bootstrap Modal。但是现在随着HTML 5的引入<dialog>元素，对于开发人员来说，在网页上创建弹出对话框和调制解调器变得更加容易。

最初，<dialog>TAG进入HTML 5规范是标记会话的一个很好的解决方案，但它早在2009年就从HTML 5规范中删除了。尽管如此，它又以一种新的形式回来了。

保定开发网站在这篇文章里，我将带你通过<dialog>元素，并展示如何充分利用它。我们开始吧!

如果你想看<dialog>元素在操作中或在代码中游玩，在这里查看现场演示。

浏览器对<dialog>元素

不幸的是，浏览器支持为<dialog>暂时是有限的。该元素目前只支持Safari6.0和ChromeCanary。即使ChromeCanary完全支持标签，您也必须启用一个标志来使用它。去chrome://flags并启用旗子“启用实验性Web平台功能”.

启用标志后，必须重新启动浏览器，以使更改生效。

这个HTMLDialogElement界面

这个HTMLDialogElement接口的HTML规范中包含了<dialog>元素，具有许多属性和方法，您可以使用这些属性和方法来使对话框出现和消失。它们如下：

方法：

这个HTMLDialogElement接口有三种打开和关闭对话框的方法。

· 

show()

· 此方法用于显示对话框。只要对话框打开，用户仍然可以访问HTML文档的其他内容。

· 

showModal()

· *用于启动

“模态对话”

· ，它阻止用户访问网页上的对话框窗口以外的任何内容。

· 

close()

· 用于关闭对话框。你可以通过

returnValue

· 作为更新属性的可选参数。

returnValue.

· 

物业：

控件中包含了两个属性。HTMLDialogElement接口。

· 

returnValue

· ：检索可选传递到的参数。

close().

· 

· 

open

· 该属性是一个布尔值。如果

true

· ，该对话框将对用户可见。否则它就会被藏起来。

活动：

当对话框关闭时，close事件将被解雇。

dialog.addEventListener('close', function() {
Other code will go here…
});

保定开发网站除了这些关键方法和属性之外，<dialog>元素还支持：

· 

form[method="dialog"]

· *用于将窗体与

<dialog>

· ..只有在对话框中有效。

· 

autofocus attribute

· 用于将焦点放在对话框中的窗体控件上。

· 

cancel event

· *a

cancel

· 当模式对话框通过以下方式关闭时，将触发

“ESC”

· 

现在，在了解了<dialog>元素，让我们通过一些例子来了解实际情况。

创建对话框

首先，我将向您展示如何创建一个简单的对话框。下面给出的代码定义了一个简单的<dialog>元素，一个关闭按钮隐藏对话框，一个显示按钮启动对话框。

<dialog id="Dialog">
<h2>Welcome to Responsive Junction!</h2>
<p>Get Your Existing Site to Responsive</p>
<button id="closeDialog">Exit</button>
</dialog>
<button id="showDialog">Show Dialog</button>

在浏览器中测试上述代码时，除了“显示对话框”按钮没有任何功能，如下面提供的屏幕截图所示：

打开和关闭<dialog>元素，您需要使用JavaScript.show()和.close().

(function() {  
  var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = function() {  
dialog.show();  
};  
document.getElementById('closeDialog').onclick = function() {  
dialog.close();  
};
})();

现在，如果单击“显示对话框”按钮，您可以在浏览器中看到对话框窗口。点击“出口”将关闭对话框窗口。这是截图：

向对话框添加样式

您可以向对话框中添加CSS样式，就像对任何其他元素一样。默认情况下，对话框窗口将以水平居中的方式显示，同时覆盖其他元素。如果您对默认位置和外观感到满意，则不需要进一步的CSS。否则，您可以添加自己的CSS来适应和设计对话框窗口，就像我在下面所做的那样：

dialog {
top: 28%;
width: 400px;  
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 15px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
border-top: 5px solid #eb9816;
}
button{
display: inline-block;
border-radius: 3px;
border: none;
font-size: 0.9rem;
padding: 0.4rem 0.8em;
background: #eb9816;
border-bottom: 1px solid #f1b75c;
color: white;
font-weight: bold;
margin: 0 0.25rem;
text-align: center;
}
button:hover, button:focus {
opacity: 0.92;
cursor: pointer;
}

创建模式对话框

如果要阻止用户访问HTML的内容，可以使用模态对话框窗口。当模态对话框窗口显示出除对话框之外的所有其他内容时，用户将无法选择灰色文本或在对话框窗口打开时单击选择按钮。

创建MODALS类似于创建对话框，唯一的区别是使用.showModal()而不是.show()..没有必要对HTML代码进行任何更改。

(function() {  
  var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = function() {  
dialog. showModal();
};  
document.getElementById('closeDialog').onclick = function() {  
dialog.close();  
};
})();

默认对话框以水平为中心显示，模式对话框在视图中垂直显示，也以水平为中心显示。此外，您还可以通过按下“逃逸”钥匙。

添加Modal对话框背景色

这个<dialog>元素具有一个名为"::backdrop"，它只适用于Modal对话框。使用此元素，您可以使主页变暗，以便与用户通信，使其无法访问。您可以利用标准的CSS属性来定位和样式背景：

dialog::backdrop{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
}

实施<dialog>有表格

窗体可以与<dialog>元素使用form method="dialog"..表单提交后，对话框窗口将关闭并通过dialog.returnValue财产。

下面是表单对话框的HTML代码：

<dialog id="formDialog">
<form method="dialog">
<p>Do you agree with terms of use?</p>
<textarea>
Enter your text here!
</textarea>
<button id="submit" value="yes">Yes</button>
<button id="submit" value="no">No</button>
</form>
</dialog>
<button id="showformDialog">Open Form Dialog</button>

对表单对话框使用以下JavaScript。

var formDialog = document.getElementById('formDialog');
document.getElementById('showformDialog').onclick = function() {  
formDialog.showModal();  
};
document.getElementById('submit').onclick = function() {
formDialog.close(value);
};
document.getElementById('formDialog').addEventListener('close', function() {
alert(formDialog.returnValue);
});

注*为了更好地理解，我正在使用formDialog代替Dialog在我的演示中。

如果你想看<dialog>元素在操作中或在代码中游玩，在这里查看现场演示。

结语

带着转世<dialog>元素时，保定开发人员无需使用jQuery插件就可以更容易地创建对话框。即使Chrome Canary和Safari 6.0解释了<dialog>元素，则有一个聚填充可用，以确保其他浏览器将支持该元素。