跳到主要内容

对话框

对话框（ Dialog ）是响应用户某种需求而弹出的小窗口。本节将介绍几种常用的对话框：警告对话框、询问回答对话框及提示对话框。

  • alert() —— --⊱ 返回参数（字符串类型数据）
  • confirm() —— --⊱⊱⊱⊱⊱ 返回参数（字符串类型数据），并提供两个按钮供选择
  • prompt() —— --⊱⊱⊱⊱⊱ 返回参数，还能够接受一个用户输入数据（字符串），若用户未填写，这默认

警告对话框​

在页面显示时弹出警告对话框主要是在 <body> 标记中调用 Window 对象的 alert 方法实现的。

利用 Window 对象的 alert 方法可以弹出一个警告框，并且在警告框内可以显示提示字符串文本。

window.alert(str);

警告对话框是由当前运行的页面弹出的。在对该对话框进行处理之前，不能对当前页面进行操作，并且其后面的代码也不会被执行。只有将警告对话框进行处理后（如单击"确定"按钮或者关闭对话框），才可以对当前页面进行操作，后面的代码也才能继续执行。

也可以利用 alert 方法对代码进行调试。当弄不清楚某段代码执行到哪里，或者不知道当前变量的取值情况时，便可以利用该方法显示有用的调试信息 。

使用 alert()方法可以弹出一个带有警告消息的对话框以提示用户一些信息。该方法的语法格式如下：

alert(msg);

参数 msg 即是要显示的文本字符串，该字符串不会以 HTML 格式显示在对话框中，也就是说， HTML 将原样显示。

对话框提供了一个"确定"按钮让用户关闭该对话框，并且用户必须先关闭该对话框然后才能继续进行操作，同时， JavaScript 代码也在这里中断，直到关闭该对话框继续执行之后的代码。

例如下面的代码：

alert("欢迎您的访问！请按"确定"按钮继续！" );

询问回答对话框​

Window 对象的 confirm 方法用于弹出一个询问回答为是或否问题的对话框。该对话框中包含两个按钮（在中文操作系统中显示为"确定"和"取消"，在英文操作系统中显示为 "OK"和 "Cancel"）。用户单击"确定"按钮，返回值为 true ；单击"取消"按钮，返回值为 false 。

window.confirm(question);

使用 confirm()方法可以弹出一个带有提示消息的对话框向用户提出一个"是 /否"的问题，该对话框会出现两个按钮，分别代表"是"和"否"。用户单击"确定"按钮表示选择"是"，单击"取消"按钮表示选择"否"。该方法的语法格式如下：

confirm(msg);

参数 msg 即是要显示的文本字符串，与 alert()方法功能相同。

该方法的返回值为 true （单击"确定"按钮）或 false （单击"取消"按钮）。用户必须在响应该对话框（单击任一个按钮）将其关闭后，才能进行下一步操作。例如下面的代码：

var returned = confirm('请选择一个按钮单击！');
if (returned === true) {
  alert('您单击了"确定"按钮！');
} else {
  alert('您单击了"取消"按钮！');
}

提示对话框​

利用 Window 对象的 prompt 方法可以在浏览器窗口中弹出一个提示框。与警告对话框和询问回答对话框不同，在提示框中有一个输入框。当显示输入框时，在输入框内显示提示字符串，在输入文本框显示缺省文本，并等待用户输入。当用户在该输入框中输入文字后，并单击"确定"按钮时，返回用户输入的字符串；当单击"取消"按钮时，返回 null 值。

语法格式如下：

window.prompt(str1， str2)
  • str1：为可选项，表示字符串（ String ），指定在对话框内要被显示的信息。如果忽略此参数，将不显示任何信息
  • str2：为可选项，表示字符串（ String ），指定对话框内输入框（ input ）的值（ value ）。如果忽略此参数，将被设置为 undefined

有时需要让用户输入一些消息进行判断，而不仅仅是选择"是"或"否"，使用 prompt()方法可以实现这个目的。

prompt()方法可以弹出一个提示输入消息对话框，该对话框中有一个文本框，用户可以在此文本框中输入一行消息来响应提示。该对话框还有一个"确定"按钮和一个"取消"按钮。 prompt()方法的语法格式如下：

prompt(msg, [input]);
  • 参数 msg 即是要显示的文本字符串，与 alert()方法功能相同
  • 参数 input 是可选的，用于在文本框中显示预置的消息。如果不定义，文本框中默认为空白

prompt()方法的返回值是一个整数或者一个字符串，表示用户输入的消息。如果用户单击了"取消"按钮，那么返回的是 null 。用户必须在响应该对话框（单击任一个按钮）将其关闭后，才能进行下一步操作。例如下面的代码：

var returned = prompt('欢迎您的访问！', '请在此输入您的名字！');
if (returned != null) {
  alert('您输入的消息是：' + returned);
} else {
  alert('您单击了"取消"按钮！');
}

当用户输入消息并单击"确定"按钮后，输入的值就会被返回，并被保存在变量 returned 中；当用户单击"取消"按钮后，返回的值为 null ，也被保存在变量 returned 中。使用条件语句检测该变量可以获得用户单击了哪个按钮，最后使用一个警告框来显示用户的输入消息或者没有选择输入消息。

由于 window 对象位于对象层次的顶层，因此实际应用中不必在这些方法前加 window ，而是直接使用方法名，例如下面的语句与前面是等价的：

alert('欢迎你的访问！请按"确定"按钮继续！');
var returned = confirm('请选择一个按钮单击！');
var returned = prompt('欢迎你的访问！', '请在此输入你的名字！');

而这 3个方法的使用又是如此的普遍，所以它们常被误认为是全局函数。不过推荐采用完全限定对象名的方法，这样有助于分类记忆。

使用增强的交互式对话框​

window.showModalDialog()方法可以创建增强的交互式对话框。使用该方法可以打开一个新窗口类型的对话框，但不像前面介绍的那些对话框，该对话框窗口可以加载一个网页，并且对话框窗口网页中的代码能够和打开它的窗口交互。这种对话框称为模式对话框（ modal ），在打开的时候，可以操控当前打开的对话框，而且仍允许用户操控打开它的窗口。

show Modal Dialog()方法的语法格式如下：

vReturnValue = window.showModalDialog(sURL[,vArguments])
  • 参数 sURL 用来定义新的对话框窗口要加载网页的 URL 地址
  • 参数 vArguments 是可选的，使用该参数可以向新打开的对话框窗口传递参数。该参数可以是任何类型的值，对话框窗口中的网页可以使用 window.dialog Arguments 属性提取传递的参数值。该参数定义的字符串最大长度是 4096，多出的部分将被删除

可使用 window.returnValue 属性获取该方法返回的值。

例如下面的应用范例：

window.showModalDialog(' myDialog.html');

注意该方法与 window.open()方法不同， showModalDialog()方法弹出的对话框窗口始终获得焦点。

虽然加载的是一个网页，但是对话框窗口不能刷新。

注意，一些浏览器默认会阻止弹出窗口，这时需设置允许弹出新窗口。