58
对话框窗口是网站用户界面设计中最常用的元素之一。它用于多种用途,包括显示通知、携带订阅表单、提醒错误/警告以及提请访问者注意重要的信息片段。当对话框窗口设计有效且使用得当时,可以简化用户的任务。
以前,创建对话框窗口需要使用jQuery插件,如通俗, jQueryUI对话框,或Twitter Bootstrap Modal。但是现在随着HTML 5的引入<dialog>元素,对于开发人员来说,在网页上创建弹出对话框和调制解调器变得更加容易。
最初,<dialog>TAG进入HTML 5规范是标记会话的一个很好的解决方案,但它早在2009年就从HTML 5规范中删除了。尽管如此,它又以一种新的形式回来了。
保定开发网站在这篇文章里,我将带你通过<dialog>元素,并展示如何充分利用它。我们开始吧!
如果你想看<dialog>元素在操作中或在代码中游玩,在这里查看现场演示。
不幸的是,浏览器支持为<dialog>暂时是有限的。该元素目前只支持Safari6.0和ChromeCanary。即使ChromeCanary完全支持标签,您也必须启用一个标志来使用它。去chrome://flags并启用旗子“启用实验性Web平台功能”.
启用标志后,必须重新启动浏览器,以使更改生效。
这个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();
};
})();
默认对话框以水平为中心显示,模式对话框在视图中垂直显示,也以水平为中心显示。此外,您还可以通过按下“逃逸”钥匙。
这个<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>元素使用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>元素,则有一个聚填充可用,以确保其他浏览器将支持该元素。
最新文章
2019.10.25
保定企业网站设计:优秀CSS 3网站设计灵感
2019.08.23
保定公司网站建设:如何成为一个伟大的设计指导
2019.08.22
保定设计网站:如何在移动响应管理空白布局
2019.06.03
保定企业网站设计:为WordPress设计素材,轻松构建美观、高功能的网站
2019.06.03
保定公司网站制作:您需要知道的WooCommerce设计小贴士
2019.06.03
保定开发网站:创建本机HTML 5对话框Windows
2019.06.03
保定做网站:Pagely是使用人工元素支持的WordPress托管
2019.06.03
保定公司网站开发:可伸缩CSS中大小的命名约定
2019.06.03
保定公司建站:屏幕点击测试技巧、技巧和工具
2019.06.03
保定建站:编写代码礼仪,使其他开发人员更少地恨您
随机推荐
2019.06.03
保定公司网站开发:可伸缩CSS中大小的命名约定
2019.06.03
保定公司建站:屏幕点击测试技巧、技巧和工具
2019.06.03
保定公司网站制作:您需要知道的WooCommerce设计小贴士
2019.08.23
保定公司网站建设:如何成为一个伟大的设计指导
2019.10.25
保定企业网站设计:优秀CSS 3网站设计灵感
2019.06.03
保定做网站:Pagely是使用人工元素支持的WordPress托管
2019.06.03
保定开发网站:创建本机HTML 5对话框Windows
2019.06.03
保定企业网站设计:为WordPress设计素材,轻松构建美观、高功能的网站
2019.08.22
保定设计网站:如何在移动响应管理空白布局
2019.06.03
保定建站:编写代码礼仪,使其他开发人员更少地恨您