ES6对话框介绍和用法示例 _ES6对话框

本文概述

警报对话框
提示对话框

JavaScript支持三种类型的对话框, 分别是警报, 确认和提示。这些对话框可用于执行特定任务, 例如发出警报, 获取事件或输入的确认以及从用户获取输入。
让我们讨论每个对话框。
警报对话框用于向用户提供警告消息。它是JavaScript中使用最广泛的对话框之一。它只有一个” 确定” 按钮以继续并选择下一个任务。
我们可以通过一个示例来理解它, 例如假设必须填写一个文本字段, 但是用户没有为该文本字段提供任何输入值, 那么我们可以通过使用警报框来显示警告消息。
语法

alert(message);

例子
让我们通过使用以下示例来查看警报对话框的演示。

< html> < head> < script type="text/javascript"> function show() { alert("It is an Alert dialog box"); } < /script> < /head> < body> < center> < h1> Hello World :) :)< /h1> < h2> Welcome to srcmini< /h2> < p> Click the following button < /p> < input type="button" value="http://www.srcmini.com/Click Me" onclick="show(); " /> < /center> < /body> < /html>

输出如下
成功执行以上代码后, 你将获得以下输出。

文章图片
单击” 单击我” 按钮后, 将获得以下输出：

文章图片
确认对话框
它广泛用于征求用户对特定选项的意见。它包括两个按钮, 分别是” 确定” 和” 取消” 。例如, 假设要求用户删除一些数据, 然后页面可以通过使用确认框确认该数据, 以确定他/她是否要删除它。
如果用户单击” 确定” 按钮, 则方法Confirm()返回true。但是, 如果用户单击” 取消” 按钮, 则Confirm()方法将返回false。
语法

confirm(message);

例子
让我们通过使用以下示例来了解此对话框的演示。

< html> < head> < script type="text/javascript"> function show() { var con = confirm ("It is a Confirm dialog box"); if(con == true) { document.write ("User Want to continue"); }else { document.write ("User does not want to continue"); } } < /script> < /head> < body> < center> < h1> Hello World :) :)< /h1> < h2> Welcome to srcmini< /h2> < p> Click the following button < /p> < input type="button" value="http://www.srcmini.com/Click Me" onclick="show(); " /> < /center> < /body> < /html>

输出如下
成功执行以上代码后, 你将获得以下输出。

文章图片
单击给定按钮时, 将获得以下输出：

文章图片
单击确定按钮后, 你将获得：

文章图片
【ES6对话框介绍和用法示例】单击取消按钮后, 你将获得：

文章图片
提示对话框需要弹出一个文本框以获取用户输入时, 将使用提示对话框。因此, 它使得能够与用户交互。
提示对话框中还有两个按钮, 分别是” 确定” 和” 取消” 。用户需要在文本框中提供输入, 然后单击” 确定” 。当用户单击” 确定” 按钮时, 对话框将读取该值并将其返回给用户。但是在单击” 取消” 按钮时, prompt()方法将返回null。
语法

prompt(message, default_string);

让我们通过使用下图来了解提示对话框。
例子

< html> < head> < script type="text/javascript"> function show() { var value = http://www.srcmini.com/prompt("Enter your Name : ", "Enter your name"); document.write("Your Name is : " + value); } < /script> < /head> < body> < center> < h1> Hello World :) :)< /h1> < h2> Welcome to srcmini< /h2> < p> Click the following button < /p> < input type="button" value="http://www.srcmini.com/Click Me" onclick="show(); " /> < /center> < /body> < /html>

输出如下
成功执行上述代码后, 你将获得以下输出。