CN113190776A - 弹窗展示方法与系统 - Google Patents

Abstract

本申请公开了一种弹窗展示方法，所述方法包括：在显示界面上展示HTML页面，所述HTML页面的HTML文档包括弹窗管理模块；检测关联于所述HTML页面的弹窗触发事件；根据所述弹窗触发事件，通过所述弹窗管理模块执行以下操作：动态创建对应于所述弹窗触发事件的目标弹窗元素，所述目标弹窗元素用于定义目标弹窗；及渲染所述目标弹窗元素，以将所述目标弹窗展示到所述显示界面。在本申请中，通过所述弹窗管理模块动态创建和自定义目标弹窗元素，实现对各个弹窗动态创建和有效管理。

Description

弹窗展示方法与系统

技术领域

本申请实施例涉及页面弹窗展示技术领域，尤其涉及一种弹窗展示方法、系统、计算机设备及可读存储介质。

背景技术

随着应用程序所支持的业务越来越复杂，经常会涉及到大量的弹窗，通过这些弹窗进行内容展示。基于不同产品和运行的弹窗，弹窗中一般会展示一些广告内容或推荐内容等。例如，在Web直播间，其内有众多业务是以弹窗的形式展现。

但是，随着业务的增多、各类弹窗日益增加，弹窗的管理也变得混乱，从而影响用户体验。

发明内容

有鉴于此，本申请实施例的目的是提供一种弹窗的展示方法、系统、计算机设备及计算机可读存储介质，用于解决以下问题：弹窗的管理也变得混乱，影响用户体验。

本申请实施例的一个方面提供了弹窗展示方法，所述方法包括：在显示界面上展示HTML页面，所述HTML页面的HTML文档包括弹窗管理模块；检测关联于所述HTML页面的弹窗触发事件；根据所述弹窗触发事件，通过所述弹窗管理模块执行以下操作：动态创建对应于所述弹窗触发事件的目标弹窗元素，所述目标弹窗元素用于定义目标弹窗；及渲染所述目标弹窗元素，以将所述目标弹窗展示到所述显示界面。

可选的，还包括通过所述弹窗管理模块执行以下操作：将所述目标弹窗元素添加到所述HTML文档的主体的尾部。

可选的，还包括：将所述目标弹窗元素的堆叠顺序属性的属性值设置为可设置范围内的最大值。

可选的，还包括：检测关联于所述目标弹窗的弹窗关闭事件；及根据所述弹窗关闭事件，通过所述弹窗管理模块将所述目标弹窗元素从所述主体中移除。

可选的，还包括：若所述目标弹窗的运行环境为Windows系统，则将HTML页面的overflow-y属性设置为overlay；其中，overflow-y属性用于规定是否对内容的上/下边缘进行裁剪。

可选的，所述目标弹窗元素为内联框架元素；所述动态创建对应于所述弹窗触发事件的目标弹窗元素，包括：通过所述弹窗管理模块中的工厂函数封装iframe弹窗实例；其中，所述工厂函数基于传入参数进行实例创建和封装，所述iframe弹窗实例用于执行所述目标弹窗；其中，所述iframe弹窗实例用于以所述内联框架元素的形式被添加到所述主体中。

可选的，所述传入参数包括样式属性参数、弹窗大小和iframe嵌套页面的链接地址，所述iframe弹窗实例包括用于位置处理的CSS代码；所述通过所述弹窗管理模块中的工厂函数封装iframe弹窗实例，包括：若弹窗位置为居中，则根据所述弹窗大小生成用于控制所述目标弹窗居中显示的CSS代码；或若所述弹窗位置为依赖入口，则根据所述弹窗大小和对应于所述依赖入口的依赖元素的属性计算所述目标弹窗的显示位置，并根据所述显示位置生成用于控制所述目标弹窗基于所述依赖入口显示的CSS代码；所述依赖入口为触发所述弹窗触发事件的显示组件，所述依赖元素为所述显示组件在HTML文档中对应的元素。

可选的，所述目标弹窗元素为Vue组件元素；所述动态创建对应于所述弹窗触发事件的目标弹窗元素，包括：通过所述弹窗管理模块中的工厂函数封装Vue组件弹窗实例；其中，所述工厂函数基于传入参数进行实例创建和封装，所述Vue组件弹窗实例用于执行所述目标弹窗；其中，所述Vue组件弹窗实例用于以所述Vue组件元素的形式被添加到所述主体中。

可选的，所述传入参数包括样式属性参数和弹窗大小，所述Vue组件弹窗实例包括用于位置处理的CSS代码；所述通过所述弹窗管理模块中的工厂函数封装Vue组件弹窗实例，包括：若所述样式属性参数包括内联CSS样式代码，则根据所述内联CSS样式代码重写Vue组件的样式代码。

本申请实施例的一个方面又提供了一种弹窗展示系统，所述系统包括：第一展示模块，用于在显示界面上展示HTML页面，所述HTML页面的HTML文档包括弹窗管理模块；检测模块，用于检测关联于所述HTML页面的弹窗触发事件；执行模块，用于根据所述弹窗触发事件，通过所述弹窗管理模块执行以下操作：动态创建对应于所述弹窗触发事件的目标弹窗元素，所述目标弹窗元素用于定义目标弹窗；及第二展示模块，用于渲染所述目标弹窗元素，以将所述目标弹窗展示到所述显示界面。

本申请实施例的一个方面又提供了一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述弹窗展示方法的步骤。

本申请实施例的一个方面又提供了一种计算机可读存储介质，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述弹窗展示方法的步骤。

本申请实施例提供的弹窗展示方法、系统、计算机设备及计算机可读存储介质，包括以下优势：通过所述弹窗管理模块动态创建和自定义目标弹窗元素，实现对各个弹窗动态创建和有效管理，确保用户体验。

附图说明

图1示意性示出了根据本申请实施例的弹窗展示方法的应用环境图；

图2示意性示出了一个HTML页面以其弹窗示意图；

图3示意性示出了另一个HTML页面以其弹窗示意图；

图4示意性示出了根据本申请实施例一的弹窗展示方法的流程图；

图5示意性示出了根据本申请实施例一的弹窗展示方法的新增流程图；

图6示意性示出了根据本申请实施例一的弹窗展示方法的另一新增流程图；

图7示意性示出了根据本申请实施例一的弹窗展示方法的另一新增流程图；

图8示意性示出了根据本申请实施例一的弹窗展示方法的效果示意图；

图9为图4中步骤S404的子流程图；

图10为图9中步骤S900的子流程图；

图11为图4中步骤S404的子流程图；

图12为图11中步骤S1100的子流程图；

图13根据本申请实施例二的弹窗展示系统的框图；及

图14示意性示出了根据本申请实施例三的计算机设备的硬件架构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

需要说明的是，在本申请中涉及“第一”、“第二”、“第三”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。

本申请涉及的术语解释：

DOM(Document Object Model，文档对象模型)，是HTML和XML文档的编程接口。

HTML(HyperText Markup Language，超文本标记语言)，是用于创建网页的标准标记语言，定义有网页内容的含义和结构。

CSS(Cascading Style Sheets，层叠样式表)，是一种样式表语言，用来描述HTML或XML(包括如SVG、MathML、XHTML之类的XML分支语言)文档的呈现。CSS描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

iframe，为HTML内联框架元素(<iframe>)，用于将另一个页面嵌入到当前页面中。

Body：HTML的元素标签，表示HTML中元素的主体内容。

Vue：是一套用于构建用户界面的渐进式javascript框架。

z-index，为CSS属性之一，用于设定元素及其后代元素的重叠层级顺序。

overflow-y：为CSS属性之一，用于属性规定溢出元素内容区域的情况下是否对内容的上/下边缘进行裁剪。overlay为overflow-y的属性值，用于表示层叠、覆盖。

postMessage，为浏览器环境下的原生方法，用于实现不同弹窗之间的安全通信。

弹窗，是打开网页的时候弹出的弹窗。弹窗可以配置各种信息，如预设时间内段的最高弹出次数，配置信息的缓存时间，以及扩展的其他信息。

图1示意性示出了根据本申请实施例的弹窗展示方法的环境应用示意图。

计算机设备2可以被配置为通过网络6接收服务侧4的页面信息。计算机设备2可以包括任何类型的计算设备，诸如平板设备、个人计算机等。

示例性的实施例中，计算机设备2可以包括应用程序8(如，浏览器)。应用程序8向用户输出(呈现、播放)内容。所述内容可以以页面方式呈现可以包括视频，音频，评论，文本数据和/或类似物，也可以弹窗的呈现部分内容，如对话框等。

如图2和图3所示，计算机设备2通过浏览器开启一个直播页面，在播放过程中，基于用户手动触发和/或基于服务侧6的主动推送，该浏览器上可能会出现一个或多个弹窗，如图2所示的用于公示“中奖结果”的弹窗，如图3所示的用于公示“热门榜”的弹窗和基于该“热门榜”触发的用于具体介绍单个热门主播的弹窗。

计算机设备2可以包括用户接口10，可以被配置为接收用户指令。在一些实施例中，计算机设备2也可以用于一些配置等操作，如自定义弹窗的各种弹窗效果等。

实施例一

图4示意性示出了根据本申请实施例一的弹窗展示方法的流程图。本实施例可以被执行在计算机设备2中，且本实施例的流程图不用于对执行步骤的顺序进行限定。

如图4所示，该弹窗展示方法可以包括步骤S400～S406，其中：

步骤S400，在显示界面上展示HTML页面，所述HTML页面的HTML文档包括弹窗管理模块。

所述弹窗管理模块，为内置于HTML文档中的一段JavaScript代码。该段JavaScript代码用于在接收到弹窗触发或关闭通知时，分别实施弹窗元素的动态创建或删除。

步骤S402，检测关联于所述HTML页面的弹窗触发事件。

所述弹窗触发事件可以包括多类消息，例如：

(1)为基于用户触发得到的消息。该用户触发可以为手势触控、实体键盘触发等。

(2)为基于服务侧6广播得到的消息，例如，服务侧6推送的活动中奖信息、广告信息等。

步骤S404，根据所述弹窗触发事件，通过所述弹窗管理模块执行以下操作：动态创建对应于所述弹窗触发事件的目标弹窗元素，所述目标弹窗元素用于定义目标弹窗。

作为示例，还包括通过所述弹窗管理模块执行以下操作：将所述目标弹窗元素添加到所述HTML文档的主体的尾部。在本实施例中，由于每次创建的弹窗元素均是添加到所述主体的尾部，因此，从时间线来看，时间越靠后的弹窗元素处于所述主体的越靠尾部的位置，从而形成队列效果，实现对各个弹窗的有效管理。

所述弹窗触发事件的传入参数根据弹窗类型不同而不同。所述弹窗管理模块可以根据所述传入参数自定义和动态创建所述目标弹窗元素，并将所述目标弹窗元素加入到所述主体的尾部。

对于用户触发得到的弹窗触发事件，其对应的所述目标弹窗为用户点击弹窗。所述传入参数可以包括：弹窗大小、依附元素(对应于用户点击的按钮，该位置在HTML网页中的位置固定，按钮的位置决定目标弹窗的位置)、可选自定义样式。

对于服务侧6主动推送得到的弹窗触发事件，其对应的所述目标弹窗为广播弹窗。所述传入参数可以包括：弹窗大小、排列方式(align，居中)、可选自定义样式。

步骤S406，渲染所述目标弹窗元素，以将所述目标弹窗展示到所述显示界面。

本申请实施例一所述的弹窗展示方法，通过所述弹窗管理模块动态创建和自定义目标弹窗元素，从而实现了对各个弹窗动态创建和有效管理，确保用户体验。

作为示例，如图5所示，该弹窗展示方法可以包括步骤S408～S410，其中：

步骤S408，检测关联于所述目标弹窗的弹窗关闭事件；及

步骤S410，根据所述弹窗关闭事件，通过所述弹窗管理模块将所述目标弹窗元素从所述主体中移除。

在本实施例中，通过所述弹窗管理模块动态删除所述目标弹窗元素，实现队列出对效果。

作为示例，如图6所示，该弹窗展示方法可以包括步骤S600，其中：

步骤S600，若所述目标弹窗的运行环境为Windows系统，则将HTML页面的overflow-y属性设置为overlay；其中，overflow-y属性用于规定是否对内容的上/下边缘进行裁剪。在本实施例中，通过上述设置解决了Windows系统中的滚动条占位效果，从而处理了Windows上的弹窗抖动问题，有效地优化用户体验。

随着业务的增多、弹窗的种类和数量也变得越来越多。从而，可能出现以下问题：

(1)不同业务之间层级覆盖，影响用户的操作体验；

(2)各个业务方每次都需要各自实现该弹窗功能代码，业务耦合度高，不易维护。

作为示例，如图7所示，该弹窗展示方法可以包括步骤S700，其中：

步骤S700，将所述目标弹窗元素的堆叠顺序属性的属性值设置为可设置范围内的最大值。在本实施例中，为创建的每个弹窗(包括所述目标弹窗)均固定一个最高属性值(z-index值)。因此，从时间线来看，时间越靠后的弹窗在所述显示界面中的展示层级相应越高。即，不通过业务的弹窗不再出现层级覆盖情况，统一遵循后来居上的层级展示原则，从而保证各个弹窗的打开顺序和展示层级的大小。如图8所示，按照时间顺序，用户节点按钮依次打开弹窗A、弹窗B、弹窗C。根据创建时间先后顺序，最后呈现的显示层叠顺序为：弹窗A＜弹窗B＜弹窗C。

作为示例，所述弹窗管理模块配置有函数工厂，该函数工厂封装有多个公用代码，从而减少各业务自定义的冗余代码，减少代码体积，提升代码加载和解析效率，降低维护难度。

例如，所述多个公用代码可以分别实现以下功能：

打开iframe弹窗；

打开Vue组件弹窗；

弹窗居中的实现逻辑；

自定义依赖入口显示弹窗的实现逻辑。

该弹窗展示方法还可以支持直播播放器在浏览器网页全屏下的居中弹窗显示等。以下提供两个方法用以支持打开iframe嵌套页面和HTML页面内部的全局Vue组件。弹窗位置支持显示在屏幕中间和指定依赖业务入口自定义两种方式。具体如下。

(一)

作为示例，所述目标弹窗元素为内联框架元素(iframe元素)。如图9所示，所述步骤S404中的所述动态创建对应于所述弹窗触发事件的目标弹窗元素，包括：步骤S900，通过所述弹窗管理模块中的工厂函数封装iframe弹窗实例；其中，所述工厂函数基于传入参数进行实例创建和封装，所述iframe弹窗实例用于执行所述目标弹窗；其中，所述iframe弹窗实例用于以所述内联框架元素的形式被添加到所述主体中。

作为示例，所述传入参数包括样式属性参数、弹窗大小和iframe嵌套页面的链接地址，所述iframe弹窗实例包括用于位置处理的CSS代码。如图10所示，所述步骤S900可以包括步骤S1000～S1002，其中：步骤S1000，若弹窗位置为居中，则根据所述弹窗大小生成用于控制所述目标弹窗居中显示的CSS代码；或步骤S1002，若所述弹窗位置为依赖入口，则根据所述弹窗大小和对应于所述依赖入口的依赖元素的属性计算所述目标弹窗的显示位置，并根据所述显示位置生成用于控制所述目标弹窗基于所述依赖入口显示的CSS代码；所述依赖入口为触发所述弹窗触发事件的显示组件，所述依赖元素为所述显示组件在HTML文档中对应的元素。

所述iframe弹窗实例的首尾添加iframe标签(如，<iframe>、</iframe>)，得到所述内联框架元素。

举例而言，通过iframe嵌套页面的链接地址、弹窗大小和定制化样式(可选)等参数，在所述HTML文档的主体中通过document.body.appendChild()原生方法添加内联框架元素(也称之为容器元素)，父容器和子容器之间的事件(比如：关闭弹窗事件)通信使用postMessage方法进行跨窗口传递。对于定制化样式的业务需求只需传入内联CSS样式代码即可。居中弹窗会根据传入的弹窗大小做计算生成好居中的CSS代码。对于自定义依赖入口显示的弹窗，只需传入依赖元素，组件内部获取传入元素的属性结合弹窗大小及定制化参数计算出显示位置。

(二)

作为示例，所述目标弹窗元素为Vue组件元素。如图11所示，所述步骤S404可以包括步骤S1100，其中：步骤S1100，通过所述弹窗管理模块中的工厂函数封装Vue组件弹窗实例；其中，所述工厂函数基于传入参数进行实例创建和封装，所述Vue组件弹窗实例用于执行所述目标弹窗；其中，所述Vue组件弹窗实例用于以所述Vue组件元素的形式被添加到所述主体中。

作为示例，所述传入参数包括样式属性参数和弹窗大小，所述Vue组件弹窗实例包括用于位置处理的CSS代码。如图12所示，所述步骤S1100可以包括步骤S1200，其中：步骤S1200，若所述样式属性参数包括内联CSS样式代码，则根据所述内联CSS样式代码重写Vue组件的样式代码。

所Vue组件弹窗实例的首尾添加块标签(如，<Div>、</Div>)，得到所述Vue组件元素。

举例而言，在所述HTML文档的主体中通过document.body.appendChild()原生方法添加Vue组件元素(也称之为容器元素)，数据和事件的传递使用Vue组件提供的方法进行处理。对于定制化样式的业务需求需传入内联CSS样式代码，内部会对Vue组件的样式进行重写。居中弹窗会根据传入的弹窗大小做计算生成好居中的CSS代码。对于自定义依赖入口显示的弹窗，只需传入依赖元素，Vue组件内部获取传入元素的属性结合弹窗大小及定制化样式参数计算出显示位置。

实施例二

图13示意性示出了根据本申请实施例二的弹窗展示系统的框图，该通信系统可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，比程序本身更适合描述弹窗展示系统在存储介质中的执行过程，以下描述将具体介绍本实施例各程序模块的功能。

如图13所示，该弹窗展示系统1300可以包括第一展示模块1310、检测模块1320、执行模块1330和第二展示模块1340，其中：

第一展示模块1310，用于在显示界面上展示HTML页面，所述HTML页面的HTML文档包括弹窗管理模块；

检测模块1320，用于检测关联于所述HTML页面的弹窗触发事件；

执行模块1330，用于根据所述弹窗触发事件，通过所述弹窗管理模块执行以下操作：动态创建对应于所述弹窗触发事件的目标弹窗元素，所述目标弹窗元素用于定义目标弹窗；及

第二展示模块1340，用于渲染所述目标弹窗元素，以将所述目标弹窗展示到所述显示界面。

可选的，执行模块1330，还用于将所述目标弹窗元素添加到所述HTML文档的主体的尾部。

可选的，该弹窗展示系统1300还包括第一设置模块，用于：

将所述目标弹窗元素的堆叠顺序属性的属性值设置为可设置范围内的最大值。

可选的，该弹窗展示系统1300还包括删除模块，用于：

检测关联于所述目标弹窗的弹窗关闭事件；及

根据所述弹窗关闭事件，通过所述弹窗管理模块将所述目标弹窗元素从所述主体中移除。

可选的，该弹窗展示系统1300还包括第二设置模块，用于

若所述目标弹窗的运行环境为Windows系统，则将HTML页面的overflo w-y属性设置为overlay；其中，overflow-y属性用于规定是否对内容的上/下边缘进行裁剪。

可选的，所述目标弹窗元素为内联框架元素。所述执行模块1330，还用于：

通过所述弹窗管理模块中的工厂函数封装iframe弹窗实例；其中，所述工厂函数基于传入参数进行实例创建和封装，所述iframe弹窗实例用于执行所述目标弹窗；

其中，所述iframe弹窗实例用于以所述内联框架元素的形式被添加到所述主体中。

可选的，所述传入参数包括样式属性参数、弹窗大小和iframe嵌套页面的链接地址，所述iframe弹窗实例包括用于位置处理的CSS代码；

所述通过所述弹窗管理模块中的工厂函数封装iframe弹窗实例，包括：

若弹窗位置为居中，则根据所述弹窗大小生成用于控制所述目标弹窗居中显示的CSS代码；或

若所述弹窗位置为依赖入口，则根据所述弹窗大小和对应于所述依赖入口的依赖元素的属性计算所述目标弹窗的显示位置，并根据所述显示位置生成用于控制所述目标弹窗基于所述依赖入口显示的CSS代码；所述依赖入口为触发所述弹窗触发事件的显示组件，所述依赖元素为所述显示组件在HTML文档中对应的元素。

可选的，所述目标弹窗元素为Vue组件元素。所述执行模块1330，还用于：

通过所述弹窗管理模块中的工厂函数封装Vue组件弹窗实例；其中，所述工厂函数基于传入参数进行实例创建和封装，所述Vue组件弹窗实例用于执行所述目标弹窗；

其中，所述Vue组件弹窗实例用于以所述Vue组件元素的形式被添加到所述主体中。

可选的，所述传入参数包括样式属性参数和弹窗大小，所述Vue组件弹窗实例包括用于位置处理的CSS代码；

所述通过所述弹窗管理模块中的工厂函数封装Vue组件弹窗实例，包括：

若所述样式属性参数包括内联CSS样式代码，则根据所述内联CSS样式代码重写Vue组件的样式代码。

实施例三

图14示意性示出了根据本申请实施例三的适于实现弹窗展示方法的计算机设备的硬件架构示意图。本实施例中，计算机设备2是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。例如，移动设备、平板设备、膝上型计算机、计算站、智能设备(例如，智能手表、智能眼镜)，虚拟现实设备、游戏设备、机顶盒、数字流设备、车载终端、智能电视、电视盒、MP4(运动图像专家组音频层IV)播放器，以及基于服务器的虚拟终端设备等。如图14所示，计算机设备2至少包括但不限于：可通过系统总线相互通信链接存储器1410、处理器1420、网络接口1430。其中：

存储器1410至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器1410可以是计算机设备2的内部存储模块，例如该计算机设备2的硬盘或内存。在另一些实施例中，存储器1410也可以是计算机设备2的外部存储设备，例如该计算机设备2上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(FlashCard)等。当然，存储器1410还可以既包括计算机设备2的内部存储模块也包括其外部存储设备。本实施例中，存储器1410通常用于存储安装于计算机设备2的操作系统和各类应用软件，例如弹窗展示方法的程序代码等。此外，存储器1410还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器1420在一些实施例中可以是中央处理器(Central Processing Unit，简称为CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器1420通常用于控制计算机设备2的总体操作，例如执行与计算机设备2进行数据交互或者通信相关的控制和处理等。本实施例中，处理器1420用于运行存储器1410中存储的程序代码或者处理数据。

网络接口1430可包括无线网络接口或有线网络接口，该网络接口1430通常用于在计算机设备2与其他计算机设备之间建立通信链接。例如，网络接口1430用于通过网络将计算机设备2与外部终端相连，在计算机设备2与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(GlobalSystem of Mobile communication，简称为GSM)、宽带码分多址(Wideband Code DivisionMultiple Access，简称为WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。

需要指出的是，图14仅示出了具有部件1410-1430的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。

在本实施例中，存储于存储器1410中的弹窗展示方法还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器1420)所执行，以完成本申请。

实施例四

本实施例还提供一种计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现实施例中的弹窗展示方法的步骤。

本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例中的弹窗展示方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。

显然，本领域的技术人员应该明白，上述的本申请实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请实施例不限制于任何特定的硬件和软件结合。

以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (12)

1.一种弹窗展示方法，其特征在于，所述方法包括：

在显示界面上展示HTML页面，所述HTML页面的包括弹窗管理模块；

检测关联于所述HTML页面的弹窗触发事件；

根据所述弹窗触发事件，通过所述弹窗管理模块执行以下操作：动态创建对应于所述弹窗触发事件的目标弹窗元素，所述目标弹窗元素用于定义目标弹窗；及

渲染所述目标弹窗元素，以将所述目标弹窗展示到所述显示界面。

2.根据权利要求1所述的弹窗展示方法，其特征在于，还包括通过所述弹窗管理模块执行以下操作：将所述目标弹窗元素添加到所述HTML文档的主体的尾部。

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

将所述目标弹窗元素的堆叠顺序属性的属性值设置为可设置范围内的最大值。

4.根据权利要求1所述的弹窗展示方法，其特征在于，还包括：

检测关联于所述目标弹窗的弹窗关闭事件；及

根据所述弹窗关闭事件，通过所述弹窗管理模块将所述目标弹窗元素从所述主体中移除。

5.根据权利要求1所述的弹窗展示方法，其特征在于，还包括：

若所述目标弹窗的运行环境为Windows系统，则将HTML页面的overflo w-y属性设置为overlay；其中，overflow-y属性用于规定是否对内容的上/下边缘进行裁剪。

6.根据权利要求1至5任意一项所述的弹窗展示方法，其特征在于，所述目标弹窗元素为内联框架元素；所述动态创建对应于所述弹窗触发事件的目标弹窗元素，包括：

通过所述弹窗管理模块中的工厂函数封装iframe弹窗实例；其中，所述工厂函数基于传入参数进行实例创建和封装，所述iframe弹窗实例用于执行所述目标弹窗；

其中，所述iframe弹窗实例用于以所述内联框架元素的形式被添加到所述主体中。

7.根据权利要求6所述的弹窗展示方法，其特征在于，所述传入参数包括样式属性参数、弹窗大小以及所述iframe弹窗实例包括用于位置处理的CSS代码；

所述通过所述弹窗管理模块中的工厂函数封装iframe弹窗实例，包括：

若弹窗位置为居中，则根据所述弹窗大小生成用于控制所述目标弹窗居中显示的CSS代码；或

若所述弹窗位置为依赖入口，则根据所述弹窗大小和对应于所述依赖入口的依赖元素的属性计算所述目标弹窗的显示位置，并根据所述显示位置生成用于控制所述目标弹窗基于所述依赖入口显示的CSS代码；所述依赖入口为触发所述弹窗触发事件的显示组件，所述依赖元素为所述显示组件在HTML文档中对应的元素。

8.根据权利要求1至5任意一项所述的弹窗展示方法，其特征在于，所述目标弹窗元素为Vue组件元素；所述动态创建对应于所述弹窗触发事件的目标弹窗元素，包括：

通过所述弹窗管理模块中的工厂函数封装Vue组件弹窗实例；其中，所述工厂函数基于传入参数进行实例创建和封装，所述Vue组件弹窗实例用于执行所述目标弹窗；

其中，所述Vue组件弹窗实例用于以所述Vue组件元素的形式被添加到所述主体中。

9.根据权利要求8所述的弹窗展示方法，其特征在于，所述传入参数包括样式属性参数和弹窗大小，所述Vue组件弹窗实例包括用于位置处理的CSS代码；

所述通过所述弹窗管理模块中的工厂函数封装Vue组件弹窗实例，包括：

若所述样式属性参数包括内联CSS样式代码，则根据所述内联CSS样式代码重写Vue组件的样式代码。

10.一种弹窗展示系统，其特征在于，所述系统包括：

第一展示模块，用于在显示界面上展示HTML页面，所述HTML页面的HTML文档包括弹窗管理模块；

检测模块，用于检测关联于所述HTML页面的弹窗触发事件；

执行模块，用于根据所述弹窗触发事件，通过所述弹窗管理模块执行以下操作：动态创建对应于所述弹窗触发事件的目标弹窗元素，所述目标弹窗元素用于定义目标弹窗；及

第二展示模块，用于渲染所述目标弹窗元素，以将所述目标弹窗展示到所述显示界面。

11.一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至9任一项所述方法的步骤。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行如权利要求1至9任一项所述方法的步骤。

Images