CN114428656B

CN114428656B - 一种弹窗显示方法及装置

Info

Publication number: CN114428656B
Application number: CN202111552027.8A
Authority: CN
Inventors: 刘明
Original assignee: Beijing Dajia Internet Information Technology Co Ltd
Current assignee: Beijing Dajia Internet Information Technology Co Ltd
Priority date: 2021-12-17
Filing date: 2021-12-17
Publication date: 2024-03-12
Anticipated expiration: 2041-12-17
Also published as: CN114428656A

Abstract

本公开关于一种弹窗显示方法及装置，涉及计算机技术领域，解决了由工程师配置弹窗的层叠属性的属性值，导致人力成本高，弹窗的展示层级错乱的问题。具体方案包括：弹窗显示装置获取待展示在目标页面的目标弹窗，并获取与目标页面关联的至少一个参考弹窗，以及每个参考弹窗的层叠属性的属性值，将至少一个参考弹窗的层叠属性的属性值中的最大值增加预设值，得到目标弹窗的层叠属性的属性值，之后，弹窗显示装置基于目标弹窗的层叠属性的属性值，在目标页面上展示目标弹窗。

Description

一种弹窗显示方法及装置

技术领域

本公开涉及计算机技术领域，尤其涉及一种弹窗显示方法及装置。

背景技术

用户通过电子设备浏览网页时，经常会遇到网页上弹出弹窗的情况。弹窗显示在网页上是通过弹窗的层叠属性实现的。预先配置该弹窗的层叠属性的属性值为较大的值，以使层叠属性的属性值大的弹窗覆盖层叠属性的属性值小的弹窗，从而保证该弹窗始终显示在网页的最顶层。

随着业务的发展，出现新的弹窗需要显示在网页的最顶层，需要给该新的弹窗的层叠属性的属性值配置更大的值。由于弹窗的层叠属性的属性值均由工程师预先配置，人力成本较高，出错率较高，会导致网页上的弹窗的展示层级错乱。尤其针对弹窗数量多的场景下，上述问题尤为突出。

发明内容

本公开提供一种弹窗显示方法及装置，解决了由工程师配置弹窗的层叠属性的属性值，导致人力成本高，弹窗的展示层级错乱的问题。

本公开的技术方案如下：

根据本公开的第一方面，提供一种弹窗显示方法，该方法包括：

获取待展示在目标页面的目标弹窗；

获取与所述目标页面关联的至少一个参考弹窗，以及每个参考弹窗的层叠属性的属性值；

将所述至少一个参考弹窗的层叠属性的属性值中的最大值增加预设值，得到所述目标弹窗的层叠属性的属性值；

基于所述目标弹窗的层叠属性的属性值，在所述目标页面上展示所述目标弹窗。

可选的，将所述至少一个参考弹窗的层叠属性的属性值中的最大值增加预设值，得到所述目标弹窗的层叠属性的属性值，包括：

如果所述目标弹窗满足预设条件，则将所述最大值增加所述预设值得到所述目标弹窗的层叠属性的属性值。

可选的，如果所述目标弹窗满足预设条件，则将所述最大值增加所述预设值得到所述目标弹窗的层叠属性的属性值，包括：

如果所述目标弹窗的属性信息中包括预设属性，或者，如果所述目标弹窗的属性信息中包括所述预设属性，且所述预设属性的属性值为预设属性值，则将所述最大值增加所述预设值得到所述目标弹窗的层叠属性的属性值。

可选的，弹窗显示方法还包括：

如果所述目标弹窗不满足所述预设条件，则获取账户为所述目标弹窗的层叠属性配置的目标值；

将所述目标值确定为所述目标弹窗的层叠属性的属性值。

可选的，如果所述目标弹窗不满足所述预设条件，则获取账户为所述目标弹窗的层叠属性配置的目标值，包括：

如果所述目标弹窗的属性信息中未包括预设属性，或者，如果所述目标弹窗的属性信息中包括所述预设属性，所述预设属性的属性值不为预设属性值，则获取所述账户为所述目标弹窗的层叠属性配置的目标值。

可选的，获取与所述目标页面关联的至少一个参考弹窗，包括：

基于预设类型，获取与所述目标页面关联的所述至少一个参考弹窗，所述预设类型为用于指示弹窗元素的类型。

可选的，弹窗显示方法还包括：

调用层级控制函数来确定所述目标弹窗是否满足所述预设条件。

根据本公开的第二方面，提供一种弹窗显示装置，包括：

获取模块，被配置为执行获取待展示在目标页面的目标弹窗；获取与所述目标页面关联的至少一个参考弹窗，以及每个参考弹窗的层叠属性的属性值；

确定模块，被配置为执行将所述获取模块获取的所述至少一个参考弹窗的层叠属性的属性值中的最大值增加预设值，得到所述目标弹窗的层叠属性的属性值；

展示模块，被配置为执行基于所述确定模块确定的所述目标弹窗的层叠属性的属性值，在所述目标页面上展示所述目标弹窗。

可选的，确定模块，具体被配置为执行：

可选的，获取模块，还被配置为执行如果所述目标弹窗不满足所述预设条件，则获取账户为所述目标弹窗的层叠属性配置的目标值；

所述确定模块，还被配置为执行将所述获取模块获取的所述目标值确定为所述目标弹窗的层叠属性的属性值。

可选的，获取模块，具体被配置为执行：

可选的，确定模块，还被配置为执行调用层级控制函数来确定所述目标弹窗是否满足所述预设条件。

根据本公开的第三方面，提供一种电子设备，电子设备包括：

处理器；

用于存储处理器可执行指令的存储器；其中，处理器被配置为执行指令，以实现上述第一方面中任一种可选地弹窗显示方法。

根据本公开的第四方面，提供一种计算机可读存储介质，计算机可读存储介质上存储有指令，当计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述第一方面中任一种可选地弹窗显示方法。

根据本公开的第五方面，提供一种计算机程序产品，包含指令，当其在电子设备上运行时，使得电子设备执行如第一方面中任一种可选地弹窗显示方法。

本公开提供的技术方案至少带来以下有益效果：弹窗显示装置获取待展示在目标页面的目标弹窗，并获取与目标页面关联的至少一个参考弹窗，以及每个参开弹窗的层叠属性的属性值，且将至少一个参考弹窗的层叠属性的属性值中的最大值增加预设值，得到目标弹窗的层叠属性的属性值。之后，弹窗显示装置基于目标弹窗的层叠属性的属性值，在目标页面上展示目标弹窗。由于目标弹窗的层叠属性的属性值高于至少一个参考弹窗的层叠属性的属性值中的最大值，且弹窗的层叠属性的属性值用于指示弹窗的显示层级，属性值越大的弹窗的显示层级高，这样使得目标弹窗能够展示在目标页面的最顶层。实现了弹窗显示的自动管理，节约了人力成本，避免了弹窗的展示层级错乱的问题，从而提高了用户体验。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种弹窗显示方法的流程图。

图2是根据一示例性实施例示出的另一种弹窗显示方法的流程图。

图3是根据一示例性实施例示出的一种弹窗显示装置的逻辑结构框图。

图4是根据一示例性实施例示出的一种电子设备的结构框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

层叠是级联样式表(cascading style sheet，CSS)的一个基本特征。层叠是一种定义了如何合并来自多个源的属性值的算法，其在CSS中处于核心地位。

Z轴上的层叠(zIndex)属性指的是在当前堆叠上下文中的堆叠层级，该层叠属性的属性值越高，表明展示优先级越高。当元素发生层叠时，层叠属性的属性值大的元素会覆盖层叠属性的属性值小的元素，即展示优先级高的元素会覆盖展示优先级低的元素。

在一些实施例中，页面可以包括多种类型的元素，如弹窗、悬浮窗等元素。当一个页面中显示多个弹窗时，可能会出现弹窗之间重叠的情况。弹窗的层叠属性能够决定弹窗的显示层级。通常，层叠属性的属性值大的弹窗的显示层级高。

本公开实施例提供的弹窗显示方法可以应用于将某一弹窗展示在页面的最顶层的场景中。弹窗的显示层级是由该弹窗的层叠属性的属性值决定的。属性值越大，显示层级越高。

在相关技术中，可以由工程师预先配置弹窗的层叠属性的属性值为较大的值，以使得该弹窗能够显示在页面的最顶层。如，工程师可以配置弹窗的层叠属性的属性值为999。随着业务的发展，会出现新的弹窗需要显示在页面的最顶层。在该情况下，需要由工程师梳理该页面的所有弹窗的层叠属性的属性值，然后再配置该新的弹窗的层叠属性的属性值。这样导致人力成本较高，出错率较高，从而导致页面上的弹窗的展示层级错乱。尤其针对弹窗数量多的场景下，上述问题尤为突出。

为了解决由工程师配置弹窗的层叠属性的属性值，导致人力成本高，弹窗的展示层级错乱的问题，本公开实施例提供一种弹窗显示方法，通过将至少一个参考弹窗的层叠属性的属性值中的最大值增加预设值，得到目标弹窗的层叠属性的属性值，使得目标弹窗能够展示在目标页面的最顶层。实现了弹窗显示的自动管理，节约了人力成本，避免了弹窗的展示层级错乱的问题，从而提高了用户体验。

图1是根据一示例性实施例示出的一种弹窗显示方法的流程图，如图1所示，该方法可以包括以下步骤101-步骤104。

101、电子设备获取待展示在目标页面的目标弹窗。

当电子设备加载完成目标页面后，可以检测用户在目标页面中的控制操作，并响应于该控制操作，获取待展示在目标页面的目标弹窗，该目标弹窗待展示在目标页面的最顶层。

可以理解的是，在本公开实施例中，上述目标弹窗可以是目标页面中的已***到文档对象模型(document object model，DOM)树中的弹窗，也可以是动态***到DOM树中的弹窗。DOM树用于表示一个页面中的所有节点，该节点可以包括页面中的各种类型的元素，如弹窗等。DOM树可以包括与目标页面关联的所有已有的弹窗，该已有的弹窗指的是已配置有层叠属性的属性值的弹窗。该已有的弹窗中每个弹窗的层叠属性的属性值可以是人工配置的，也可以是采用本公开实施例中的方法配置的。

在目标弹窗是目标页面中的已***DOM树中的弹窗的场景中，表明需要将目标页面中已有的目标弹窗的层叠属性的属性值重新进行设置，以使得该目标弹窗能够显示在目标页面的最顶层。

在目标弹窗是动态***到DOM树中的弹窗的场景中，表明该目标弹窗是目标页面中新增的弹窗，需要为该目标弹窗配置最大的层叠属性的属性值，以使得该目标弹窗显示在目标页面的最顶层。

102、电子设备获取与目标页面关联的至少一个参考弹窗，以及每个参考弹窗的层叠属性的属性值。

其中，参考弹窗指的是目标页面的所有已有的弹窗，即所有已配置有层叠属性的属性值的弹窗。层叠属性的属性值大的弹窗的显示层级高，层叠属性的属性值小的弹窗的显示层级高。高显示层级的弹窗会遮盖低显示层级的弹窗。

可选的，在本公开实施例中，电子设备可以基于预设类型，获取与目标页面关联的至少一个参考弹窗，该预设类型为用于指示弹窗元素的类型。

可以理解的是，上述预设类型可以是预先定义的类名。例如，该类名可以是：class＝”pop-layer”。通过预先为目标页面的所有已有的弹窗添加统一的类名，来实现电子设备通过该类名，获取到目标页面的所有的弹窗。

103、电子设备将至少一个参考弹窗的层叠属性的属性值中的最大值增加预设值，得到目标弹窗的层叠属性的属性值。

电子设备在获取到目标弹窗，且获取到每个参考弹窗的层叠属性的属性值之后，可以将至少一个参考弹窗的层叠属性的属性值中的最大值增加预设值，得到目标弹窗的层叠属性的属性值。该预设值为正数，例如该预设值可以为1。

可选的，在本公开实施例中，电子设备在获取到每个参考弹窗的层叠属性的属性值后，可以遍历所有参考弹窗的层叠属性的属性值，获得所有值中的最大值，并将最大值存储在预定义的全局变量中。电子设备在获取到目标弹窗之后，可以将全局变量中的最大值增加预设值得到一个和值，并将该和值赋值给目标弹窗的层叠属性的属性值。

这样，通过将至少一个参考弹窗的层叠属性的属性值中的最大值增加预设值，得到目标弹窗的层叠属性的属性值，能够保证目标弹窗的层叠属性的属性值最大，从而保证目标弹窗的显示层级最高。

104、电子设备基于目标弹窗的层叠属性的属性值，在目标页面上展示目标弹窗。

若目标页面上已经显示有一些弹窗，那么目标弹窗是在这些已显示的弹窗的显示层级之上的层级显示的。

上述实施例提供的技术方案至少带来以下有益效果：弹窗显示装置获取待展示在目标页面的目标弹窗，并获取与目标页面关联的至少一个参考弹窗，以及每个参开弹窗的层叠属性的属性值，且将至少一个参考弹窗的层叠属性的属性值中的最大值增加预设值，得到目标弹窗的层叠属性的属性值。之后，弹窗显示装置基于目标弹窗的层叠属性的属性值，在目标页面上展示目标弹窗。由于目标弹窗的层叠属性的属性值高于至少一个参考弹窗的层叠属性的属性值中的最大值，且弹窗的层叠属性的属性值用于指示弹窗的显示层级，属性值越大的弹窗的显示层级高，这样使得目标弹窗能够展示在目标页面的最顶层。实现了弹窗显示的自动管理，节约了人力成本，避免了弹窗的展示层级错乱的问题，从而提高了用户体验。

可选的，基于图1，如图2所示，上述步骤103具体可以包括以下步骤105。

105、如果目标弹窗满足预设条件，则电子设备将最大值增加预设值得到目标弹窗的层叠属性的属性值。

在本公开的一些实施例中，电子设备可以调用层级控制函数，如自动化层级控制函数(setIndex)，来确定目标弹窗是否满足预设条件。如果目标弹窗满足预设条件，则电子设备可以将最大值增加预设值得到目标弹窗的层叠属性的属性值。如果目标弹窗不满足预设条件，则电子设备可以获取账户为目标弹窗的层叠属性配置的目标值，将目标值确定为目标弹窗的层叠属性的属性值，并基于该属性值在目标页面上展示目标弹窗。

可选的，在本公开实施例中，电子设备可以采用多种方式确定目标弹窗是否满足预设条件，本公开实施例在此不做具体限定。

第一种方式中，电子设备可以获取目标弹窗的属性信息。如果该目标弹窗的属性信息中包括预设属性，则电子设备确定目标弹窗满足预设条件。如果目标弹窗的属性信息中未包括预设属性，则确定目标弹窗不满足预设条件。其中，该预设属性可以是自定义属性(auto-zindex)。

第二种方式中，如果目标弹窗的属性信息中包括预设属性，且预设属性的属性值为预设属性值，例如属性值为真(true)，则电子设备确定目标弹窗满足预设条件。如果目标弹窗的属性信息中包括预设属性，但该预设属性的属性值不为预设属性值，例如属性值为假(false)或为空，则电子设备确定目标弹窗不满足预设条件。

这样，通过多种多样的方式实现了目标弹窗是否满足预设条件的判断，提高了自动管理的多样性。

上述实施例提供的技术方案至少带来以下有益效果：电子设备通过判断目标弹窗是否满足预设条件，仅对满足预设条件的目标弹窗进行自动化管理，使得自动化管理更加灵活，能够满足特定场景的业务需求。当目标弹窗不满足预设条件时，电子设备可以将用户为目标弹窗配置的属性值作为目标弹窗的层叠属性的属性值，使得无需自动管理的弹窗能够实现显示。

图3是根据一示例性实施例示出的一种弹窗显示装置的逻辑结构框图。参照图3，该弹窗显示装置应用于电子设备，该弹窗显示装置包括：获取模块31、确定模块32和展示模块33。

获取模块31，被配置为执行获取待展示在目标页面的目标弹窗；获取与所述目标页面关联的至少一个参考弹窗，以及每个参考弹窗的层叠属性的属性值；

确定模块32，被配置为执行将所述获取模块31获取的所述至少一个参考弹窗的层叠属性的属性值中的最大值增加预设值，得到所述目标弹窗的层叠属性的属性值；

展示模块33，被配置为执行基于所述确定模块32确定的所述目标弹窗的层叠属性的属性值，在所述目标页面上展示所述目标弹窗。

可选的，确定模块32，具体被配置为执行：

可选的，获取模块31，还被配置为执行如果所述目标弹窗不满足所述预设条件，则获取账户为所述目标弹窗的层叠属性配置的目标值；

所述确定模块32，还被配置为执行将所述获取模块31获取的所述目标值确定为所述目标弹窗的层叠属性的属性值。

可选的，获取模块31，具体被配置为执行：

可选的，确定模块32，还被配置为执行调用层级控制函数来确定所述目标弹窗是否满足所述预设条件。

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

图4是根据一示例性实施例示出的一种电子设备的结构框图，该电子设备可以是弹窗显示装置，该弹窗显示装置可以是：智能手机、平板电脑、笔记本电脑或台式电脑。

弹窗显示装置可以包括至少一个处理器41，通信总线42，存储器43以及至少一个通信接口44。

处理器41可以是一个处理器(central processing units，CPU)，微处理单元，或一个或多个用于控制本公开方案程序执行的集成电路。

通信总线42可包括一通路，在上述组件之间传送信息。

通信接口44，使用任何收发器一类的装置，用于与其他设备或通信网络通信，如以太网，无线接入网(radio access network，RAN)，无线局域网(wireless local areanetworks，WLAN)等。

存储器43可以是只读存储器(read-only memory，ROM)或可存储静态信息和指令的其他类型的静态存储设备，随机存取存储器(random access memory，RAM)或者可存储信息和指令的其他类型的动态存储设备，也可以是电可擦可编程只读存储器(electricallyerasable programmable read-only memory，EEPROM)、只读光盘(compact disc read-only memory，CD-ROM)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器可以是独立存在，通过总线与处理单元相连接。存储器也可以和处理单元集成在一起。

其中，存储器43用于存储执行本公开方案的应用程序代码，并由处理器41来控制执行。处理器41用于执行存储器43中存储的应用程序代码，从而实现本公开方法中的功能。

在具体实现中，作为一种实施例，处理器41可以包括一个或多个CPU，例如图4中的CPU0和CPU1。

在具体实现中，作为一种实施例，弹窗显示装置可以包括多个处理器，例如图4中的处理器41和处理器45。这些处理器中的每一个可以是一个单核(single-CPU)处理器，也可以是一个多核(multi-CPU)处理器。

在具体实现中，作为一种实施例，弹窗显示装置还可以包括输入设备46和输出设备47。输入设备46和处理器41通信，可以以多种方式接受用户的输入。例如，输入设备46可以是鼠标、键盘、触摸屏设备或传感设备等。输出设备47和处理器41通信，可以以多种方式来显示信息。例如，输出设备47可以是液晶显示器(liquid crystal display，LCD)，发光二级管(light emitting diode，LED)显示设备等。

本领域技术人员可以理解，图4中示出的结构并不构成对电子设备的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

本公开还提供了一种包括指令的计算机可读存储介质，所述计算机可读存储介质上存储有指令，当所述计算机可读存储介质中的指令由计算机的处理器执行时，使得计算机能够执行上述所示实施例提供的弹窗显示方法。例如，计算机可读存储介质可以为包括指令的存储器43，上述指令可由电子设备的处理器41执行以完成上述方法。可选地，计算机可读存储介质可以是ROM、RAM、CD-ROM、磁带、软盘和光数据存储设备等。

本公开还提供了一种包含指令的计算机程序产品，当其在电子设备上运行时，使得电子设备执行上述所示实施例提供的弹窗显示方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims

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

获取待展示在目标页面的目标弹窗；

基于所述目标弹窗的层叠属性的属性值，在所述目标页面上展示所述目标弹窗；

所述将所述至少一个参考弹窗的层叠属性的属性值中的最大值增加预设值，得到所述目标弹窗的层叠属性的属性值，包括：

如果所述目标弹窗满足预设条件，则将所述最大值增加所述预设值得到所述目标弹窗的层叠属性的属性值；

所述如果所述目标弹窗满足预设条件，则将所述最大值增加所述预设值得到所述目标弹窗的层叠属性的属性值，包括：

如果所述目标弹窗的属性信息中包括预设属性，或者，如果所述目标弹窗的属性信息中包括所述预设属性，且所述预设属性的属性值为预设属性值，则将所述最大值增加所述预设值得到所述目标弹窗的层叠属性的属性值；所述预设属性为自定义属性，所述预设属性值为真。

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

将所述目标值确定为所述目标弹窗的层叠属性的属性值。

3.根据权利要求2所述的弹窗显示方法，其特征在于，所述如果所述目标弹窗不满足所述预设条件，则获取账户为所述目标弹窗的层叠属性配置的目标值，包括：

4.根据权利要求1所述的弹窗显示方法，其特征在于，所述获取与所述目标页面关联的至少一个参考弹窗，包括：

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

6.一种弹窗显示装置，其特征在于，包括：

展示模块，被配置为执行基于所述确定模块确定的所述目标弹窗的层叠属性的属性值，在所述目标页面上展示所述目标弹窗；

所述确定模块，具体被配置为执行：

7.根据权利要求6所述的弹窗显示装置，其特征在于，

所述获取模块，还被配置为执行如果所述目标弹窗不满足所述预设条件，则获取账户为所述目标弹窗的层叠属性配置的目标值；

8.根据权利要求7所述的弹窗显示装置，其特征在于，所述获取模块，具体被配置为执行：

9.根据权利要求6中任一项所述的弹窗显示装置，其特征在于，所述获取模块，具体被配置为执行：

10.根据权利要求6所述的弹窗显示装置，其特征在于，

所述确定模块，还被配置为执行调用层级控制函数来确定所述目标弹窗是否满足所述预设条件。

11.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1-5中任一项所述的弹窗显示方法。

12.一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，其特征在于，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如权利要求1-5中任一项所述的弹窗显示方法。

13.一种计算机程序产品，包括计算机指令，其特征在于，所述计算机指令被处理器执行时实现权利要求1-5中任一项所述的弹窗显示方法。