CN106201511A - 创建模态对话框的方法及装置 - Google Patents

Abstract

本发明公开了一种创建模态对话框的方法及装置。该方法包括：调用目标函数，所述目标函数用于在HTML页面上创建模态对话框；利用HTML标签在所述HTML页面上创建并显示对话框；监听用于关闭所述对话框的事件是否被触发；在监听到所述事件被触发的情况下，响应所述事件并生成返回值；调用所述目标函数的参数中包括的回调函数，以对所述返回值进行处理。实现了将通过HTML标签生成的对话框模拟成模态对话框，无需对现有代码进行较大的改动，且适用于各种版本的浏览器。

Description

创建模态对话框的方法及装置

技术领域

本发明涉及信息处理技术领域，具体地，涉及一种创建模态对话框的方法及装置。

背景技术

对话框是HTML页面上经常出现的一种供用户与浏览器进行交互的窗口。对话框可以分为模态对话框和非模态对话框。模态对话框与非模态对话框的区别在于：模态对话框限定用户只能针对模态对话框上呈现的各种选项进行操作，用户针对模态对话框以外的选项或按钮所进行的操作，浏览器不予响应。

相关技术中，创建模态对话框是通过第三方组件实现的，因此，需要对现有代码进行较大的改动，并且所依赖的功能较多。

发明内容

本发明的目的是提供一种创建模态对话框的方法及装置，采用该方法创建模态对话框无需对现有代码进行较大的改动。

为了实现上述目的，本发明提供一种创建模态对话框的方法，所述方法包括：

调用目标函数，所述目标函数用于在HTML页面上创建模态对话框；

利用HTML标签在所述HTML页面上创建并显示对话框；

监听用于关闭所述对话框的事件是否被触发；

在监听到所述事件被触发的情况下，响应所述事件并生成返回值；

调用所述目标函数的参数中包括的回调函数，以对所述返回值进行处理。

可选地，所述方法还包括：

在所述目标函数的参数中包括所述回调函数时，将所述返回值返回给所述回调函数。

可选地，所述方法还包括：

在所述目标函数的参数中未包括所述回调函数时，暂停对所述目标函数之后的代码的执行；

在监听到所述事件被触发的情况下，响应所述事件并生成返回值之后，所述方法还包括：

继续执行所述目标函数之后的代码，以对所述返回值进行处理。

可选地，所述监听用于关闭所述对话框的事件是否被触发，包括：

检测所述对话框上的关闭按钮是否被用户按下；或

判断所述对话框是否满足预定条件，所述对话框在满足所述预定条件时自动关闭。

可选地，所述HTML标签为dialog标签或div标签。

本发明实施例还提供一种创建模态对话框的装置，所述装置包括：

第一调用模块，用于调用目标函数，所述目标函数用于在HTML页面上创建模态对话框；

创建模块，用于利用HTML标签在所述HTML页面上创建并显示对话框；

监听模块，用于监听用于关闭所述对话框的事件是否被触发；

响应模块，用于在监听到所述事件被触发的情况下，响应所述事件并生成返回值；

第二调用模块，用于调用所述目标函数的参数中包括的回调函数，以对所述返回值进行处理。

可选地，所述装置还包括：

发送模块，用于在所述目标函数的参数中包括所述回调函数时，将所述返回值返回给所述回调函数。

可选地，所述装置还包括：

控制模块，用于在所述目标函数的参数中未包括所述回调函数时，暂停对所述目标函数之后的代码的执行；

执行模块，用于在监听到所述事件被触发的情况下，响应所述事件并生成返回值之后，继续执行所述目标函数之后的代码，以对所述返回值进行处理。

可选地，所述监听模块用于：

检测所述对话框上的关闭按钮是否被用户按下；或

判断所述对话框是否满足预定条件，所述对话框在满足所述预定条件时自动关闭。

可选地，所述HTML标签为dialog标签或div标签。

通过上述技术方案，利用HTML标签在HTML页面上创建并显示对话框，在监听到用于关闭所述对话框的事件被触发的情况下，响应该事件并生成返回值，最后调用目标函数的参数中包括的回调函数，以对返回值进行处理。因此，实现了将通过HTML标签生成的对话框模拟成模态对话框，无需对现有代码进行较大的改动。

本发明的其他特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本发明的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本发明，但并不构成对本发明的限制。在附图中：

图1为本发明实施例提供的一种创建模态对话框的方法的流程图。

图2为本发明实施例提供的一种创建模态对话框的方法的另一流程图。

图3为本发明实施例提供的一种创建模态对话框的方法的另一流程图。

图4为本发明实施例提供的一种创建模态对话框的装置的框图。

具体实施方式

以下结合附图对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。

请参考图1，图1为本发明实施例提供的一种创建模态对话框的方法的流程图。该方法包括以下步骤：

步骤S11：调用目标函数，所述目标函数用于在HTML页面上创建模态对话框；

步骤S12：利用HTML标签在所述HTML页面上创建并显示对话框；

步骤S13：监听用于关闭所述对话框的事件是否被触发；

步骤S14：在监听到所述事件被触发的情况下，响应所述事件并生成返回值；

步骤S15：调用所述目标函数的参数中包括的回调函数，以对所述返回值进行处理。

本发明实施例中，在需要创建模态对话框时，即可调用目标函数，目标函数用于在HTML页面上创建模态对话框。目标函数可以表示为：function showModalDialog(url,args,opts,callback){…}。其中，目标函数的参数有四个，分别为：url,args,opts,callback。url表示统一资源定位符(Uniform Resource Locator)。callback表示回调函数。

由于相关技术中，在创建模态对话框时通常使用的浏览器原本支持的showModalDialog函数，新版本的浏览器中(比如Chrome)已经不支持该函数。因此，本公开针对不支持该函数的浏览器，提供上述目标函数，在用法上尽量和原来一致，以确保对现有代码的改动很小。

在调用目标函数之后，目标函数被执行。目标函数被执行的过程包括：首先，利用HTML标签在HTML页面上创建对话框，并显示给用户。然后，监听用于关闭对话框的事件是否被触发。

举例来讲，用户打开浏览器，并打开了多个HTML页面，当用户想要关闭浏览器时，点击用户关闭浏览器的按钮，此时，需要创建模态对话框，以向用户确认是否要关闭浏览器，则调用目标函数。

在调用目标函数之后，首先利用HTML标签在HTML页面上创建对话框，并显示给用户，该对话框用于模拟模态对话框。为了使用该对话框模拟出模态对话框，还需要将模态对话框所具有的功能赋予给该对话框。因此，需要监听用于关闭对话框的事件是否被触发。

在监听到用于关闭对话框的事件被触发的情况下，执行以下步骤，以实现将将模态对话框所具有的功能赋予给该对话框：

首先，响应该事件并生成返回值；

然后，调用目标函数的参数中包括的回调函数，以对返回值进行处理。

其中，返回值可以是用户输入的信息，例如：用户输入的校验码。返回值还可以是根据用户所选择的选项，所生成的具有特定含义的值，例如：用户选择的选项为是，则返回值为1，表示用户确认要关闭浏览器；用户选择的选项为否，则返回值为0，表示用户要保持浏览器处于打开状态。

本发明实施例中，目标函数的参数中包括回调函数，通过调用回调函数，由回调函数对返回值进行处理。进而模拟出模态对话框具有的功能。因此，实现了将通过HTML标签生成的对话框模拟成模态对话框，无需对现有代码进行较大的改动。

可选地，在所述目标函数的参数中包括所述回调函数时，将所述返回值返回给所述回调函数。

请参考图2，图2为本发明实施例提供的一种创建模态对话框的方法的另一流程图。如图2所示，该方法除包括步骤S11-步骤S15外，还包括以下步骤：

步骤S14b：在所述目标函数的参数中包括所述回调函数时，将所述返回值返回给所述回调函数。

具体来讲，为了便于回调函数对返回值进行处理，在生成返回值之后，需要将返回值返回给回调函数。为了提高处理效率，避免不必要的数据传输或者产生错误，可以首先判断目标函数的参数中是否包括回调函数，在判定目标函数的参数中包括回调函数时，执行步骤S14b，将返回值返回给回调函数。

可选地，在所述目标函数的参数中未包括所述回调函数时，暂停对所述目标函数之后的代码的执行；

相应地，在步骤S14之后，所述方法还包括：

继续执行所述目标函数之后的代码，以对所述返回值进行处理。

为了兼容参数中不包括回调函数的目标函数，可以通过抛异常的方式暂停目标函数之后的代码的执行，在执行完步骤S14，生成返回值之后，再通过eval函数继续执行目标函数之后的代码，由目标函数之后的代码对返回值进行处理。

本发明实施例中，针对目标函数包括回调函数的情况以及目标函数不包括回调函数的情况，分别提出不同的处理方式，以对返回值进行处理。进而进而模拟出模态对话框具有的功能。适用范围广泛。

可选地，所述监听用于关闭所述对话框的事件是否被触发，包括：

检测所述对话框上的关闭按钮是否被按下；或

判断所述对话框是否满足预定条件，所述对话框在满足所述预定条件时自动关闭。

具体来讲，触发用于关闭对话框的事件可以是由用户触发的，也可以是对话框主动触发的。一种可能的情况是：对话框上有关闭按钮，用户点击关闭按钮即触发了用于关闭对话框的事件。另一种可能的情况是：对话框上没有关闭按钮，对话框在满足预定条件时自动关闭。例如：对话框持续呈现预定时长后会自动关闭，则对话框自动关闭的时刻到期即触发了用于关闭对话框的事件。又例如：对话框呈现的是某个任务(例如：上传文件)的执行进度，在执行进度为100％时，对话框自动关闭，则任务执行进度为100％的事件触发了用于关闭对话框的事件。

因此，监听用于关闭对话框的事件需要从两方面进行：一方面是检测对话框上的关闭按钮是否被用户按下，另一方面是判断对话框是否满足预定条件。

本发明实施例中，提供了两种监听关闭对话框的方法，相应地，针对用于关闭对话框的事件的两种不同情况，均适用于本发明实施例提供的创建模态对话框的方法，扩展适用范围。

可选地，所述HTML标签为dialog标签或div标签。

本发明实施例中，可以采用dialog标签创建对话框，也可以采用div标签创建对话框。采用div标签创建对话框的不同之处在于，需要用CSS设置div标签的样式。

当采用dialog标签创建对话框时，可以监听dialog标签的close事件，如果监听到dialog标签的close事件，则用于关闭对话框的事件被触发。当采用div标签创建对话框时，可以检测针对对话框上的关闭按钮的点击操作，如果检测到针对对话框上的关闭按钮的点击操作，则用于关闭对话框的事件被触发。

本发明实施例中，提供了利用div标签创建模态对话框，确保不同浏览器间的界面基本一致。适用于不同的浏览器。由于各种版本的浏览器都支持div标签，所以本发明实施例提供的创建模态对话框的方法适用于各种版本的浏览器。

下面对本发明实施例提供的创建模态对话框的方法进行整体说明。请参考图3，图3为本发明实施例提供的创建模态对话框的方法的另一流程图。该方法包括：

1)在需要创建模态对话框的情况下，调用目标函数；

2)利用HTML标签在HTML页面上创建并显示对话框；

3)监听用于关闭所述对话框的事件是否被触发；

4)在监听到该事件被触发的情况下，判断目标函数的参数中是否包括回调函数，如果目标函数的参数中包括回调函数，则转入步骤5)至步骤6a)；如果目标函数的参数中未包括回调函数，则暂停对目标函数之后的代码的执行，然后转入步骤5)至步骤6b)；

5)响应该事件并生成返回值；

6a)将返回值返回给回调函数，以对返回值进行处理；

6b)继续执行目标函数之后的代码，以对返回值进行处理。

基于同一发明构思，本发明实施例还提供一种创建模态对话框的装置。请参考图4，图4为本发明实施例提供的创建模态对话框的装置的框图。该装置100包括：

第一调用模块121，用于调用目标函数，所述目标函数用于在HTML页面上创建模态对话框；

创建模块122，用于利用HTML标签在所述HTML页面上创建并显示对话框；

监听模块123，用于监听用于关闭所述对话框的事件是否被触发；

响应模块124，用于在监听到所述事件被触发的情况下，响应所述事件并生成返回值；

第二调用模块125，用于调用所述目标函数的参数中包括的回调函数，以对所述返回值进行处理。

可选地，所述装置还包括：

发送模块，用于在所述目标函数的参数中包括所述回调函数时，将所述返回值返回给所述回调函数。

可选地，所述装置还包括：

控制模块，用于在所述目标函数的参数中未包括所述回调函数时，暂停对所述目标函数之后的代码的执行；

执行模块，用于在监听到所述事件被触发的情况下，响应所述事件并生成返回值之后，继续执行所述目标函数之后的代码，以对所述返回值进行处理。

可选地，所述监听模块用于：

检测所述对话框上的关闭按钮是否被用户按下；或

监听所述对话框是否满足预定条件，所述对话框在满足所述预定条件时自动关闭。

可选地，所述HTML标签为dialog标签或div标签。

关于上述实施例中的系统，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

以上结合附图详细描述了本发明的优选实施方式，但是，本发明并不限于上述实施方式中的具体细节，在本发明的技术构思范围内，可以对本发明的技术方案进行多种简单变型，这些简单变型均属于本发明的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合，为了避免不必要的重复，本发明对各种可能的组合方式不再另行说明。

此外，本发明的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明的思想，其同样应当视为本发明所公开的内容。

Claims (10)

1.一种创建模态对话框的方法，其特征在于，所述方法包括：

调用目标函数，所述目标函数用于在HTML页面上创建模态对话框；

利用HTML标签在所述HTML页面上创建并显示对话框；

监听用于关闭所述对话框的事件是否被触发；

在监听到所述事件被触发的情况下，响应所述事件并生成返回值；

调用所述目标函数的参数中包括的回调函数，以对所述返回值进行处理。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在所述目标函数的参数中包括所述回调函数时，将所述返回值返回给所述回调函数。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在所述目标函数的参数中未包括所述回调函数时，暂停对所述目标函数之后的代码的执行；

在监听到所述事件被触发的情况下，响应所述事件并生成返回值之后，所述方法还包括：

继续执行所述目标函数之后的代码，以对所述返回值进行处理。

4.根据权利要求1所述的方法，其特征在于，所述监听用于关闭所述对话框的事件是否被触发，包括：

检测所述对话框上的关闭按钮是否被用户按下；或

判断所述对话框是否满足预定条件，所述对话框在满足所述预定条件时自动关闭。

5.根据权利要求1所述的方法，其特征在于，所述HTML标签为dialog标签或div标签。

6.一种创建模态对话框的装置，其特征在于，所述装置包括：

第一调用模块，用于调用目标函数，所述目标函数用于在HTML页面上创建模态对话框；

创建模块，用于利用HTML标签在所述HTML页面上创建并显示对话框；

监听模块，用于监听用于关闭所述对话框的事件是否被触发；

响应模块，用于在监听到所述事件被触发的情况下，响应所述事件并生成返回值；

第二调用模块，用于调用所述目标函数的参数中包括的回调函数，以对所述返回值进行处理。

7.根据权利要求6所述的装置，其特征在于，所述装置还包括：

发送模块，用于在所述目标函数的参数中包括所述回调函数时，将所述返回值返回给所述回调函数。

8.根据权利要求6所述的装置，其特征在于，所述装置还包括：

控制模块，用于在所述目标函数的参数中未包括所述回调函数时，暂停对所述目标函数之后的代码的执行；

执行模块，用于在监听到所述事件被触发的情况下，响应所述事件并生成返回值之后，继续执行所述目标函数之后的代码，以对所述返回值进行处理。

9.根据权利要求6所述的装置，其特征在于，所述监听模块用于：

检测所述对话框上的关闭按钮是否被用户按下；或

判断所述对话框是否满足预定条件，所述对话框在满足所述预定条件时自动关闭。

10.根据权利要求6所述的装置，其特征在于，所述HTML标签为dialog标签或div标签。