在这篇快速文章中,我们将讨论如何使用JavaScript显示确认对话框。确认对话框允许你根据用户的输入来执行动作。
JavaScript是网络的核心技术之一。大多数网站都使用它,而且所有的现代网络浏览器都支持它,不需要插件。在Envato Tuts+这里,我们讨论的是有助于你在日常的JavaScript开发中的技巧和窍门。
作为一个JavaScript开发者,你经常需要接受用户以是或否的形式输入的问题,并在此基础上执行某些操作。具体来说,有一些操作是敏感的,不能撤销的,你想警告或与用户确认他们是否真的打算执行该操作,这样他们就不会误操作了。例如,如果有一个删除链接,允许你从数据库中删除一个实体,你想向用户确认他们是否真的想删除它。因此,即使用户错误地点击了删除链接,他们至少也有机会取消它。
在这篇文章中,我将向你展示两种在JavaScript中确认用户操作的方法:使用confirm 方法,以及使用一个隐藏的确认div 。
confirm 方法的语法
在JavaScript中,你可以使用 confirm window 对象的方法来显示一个对话框,并等待用户确认或取消它。今天,我们将结合一个真实世界的例子来讨论它是如何工作的。
在这一节中,我们将介绍一下 window.confirm方法的语法。
确认方法的语法看起来像这样:
var result = window.confirm(message);
确认方法需要一个单一的字符串参数,你可以传递一个你想在对话框中显示的信息。这是一个可选的参数,但你要传递一个合理的信息--否则将显示一个有 "是 "和 "否 "选项的空白对话框,而且可能对你的访问者没有任何意义。通常情况下,信息是以问题的形式出现的,用户会有两个选项可以选择。
在一个对话框中,有两个按钮。确定和取消。如果用户点击了确定按钮,确认方法返回true ,如果用户点击了取消按钮,确认方法返回false 。所以你可以使用确认方法的返回值来了解用户的选择。(如果你想让按钮显示不同的内容,比如说Yes和No,我会在这篇文章的底部告诉你如何做)。
由于window 对象总是隐含的,也就是说它的属性和方法总是在范围内,你也可以调用confirm 方法,如下面的片段所示:
var result = confirm(message);
值得注意的是,确认对话框是模式化的,而且是同步的。因此,当对话框显示时,JavaScript代码的执行是停止的,在用户通过点击ok或cancel按钮解散对话框后,代码继续执行。
所以这就是confirm 方法的语法概述。在下一节中,我们将讨论一个真实世界的例子。
confirm 方法的一个真实例子
在这一节中,我们将通过一个真实世界的例子来演示如何在JavaScript中使用confirm 方法。
请看下面这个例子。
当用户点击删除我的资料按钮时,它调用了deleteProfile 函数。在deleteProfile 函数中,我们调用了确认方法,向用户展示了确认对话框。
最后,如果用户点击该确认对话框中的OK按钮,我们将继续进行,并将用户重定向到/deleteProfie.php ,该页面将执行删除操作。另一方面,如果用户点击了 "取消"按钮,我们将不做任何事情。JavaScript的执行会被停止,直到用户做出选择并取消确认对话框。
所以这就是你如何在JavaScript中使用确认方法来呈现一个是或否的选择对话框。
用一个隐藏的Div来确认是或否
使用confirm 方法来获得用户确认,有一些缺点。一个是确认对话框不会成为你的应用程序或网站的用户界面的一部分。它不会使用你的品牌或颜色方案。它也不能被定制,例如,如果你想说 "是"或**"否**"而不是 "确定"和 "取消"。最后,确认对话框是模态的,所以只要它在显示,用户就不能与你的应用程序界面的任何其他部分互动。
另一种确认 "是 "或 "否 "的方法是在你的页面上使用一个隐藏的div。请看下面的例子。
在这个例子中,我们有一个隐藏的确认div,其id为confirm 。要显示这个div,我们只需将它的hidden 属性设置为true 。当我们想显示确认信息时,我们将hidden 设置为true ,并再次将其设置为false 以隐藏它。
正如你所看到的,这种确认 "是 "或 "否 "的方法比window.confirm 方法允许我们有更多的灵活性和自定义。
结论
今天,我们讨论了在JavaScript中获得用户确认的两种方法。首先我们看了最简单的方法:window.confirm方法,然而这并没有创造出很好的用户体验。然后我向你展示了如何使用一个隐藏的div来获得用户确认,并对确认的外观和行为有更多的控制。