CN115357314A - 弹窗展示方法、装置以及存储介质和电子设备 - Google Patents

Abstract

本发明提供了一种弹窗展示方法、装置以及存储介质和电子设备，其中，该方法包括：接收对目标节点的弹窗展示指令，获取目标节点对应的弹窗信息；获取目标节点的位置和大小以及页面可视区域的大小，并根据目标节点的位置和大小以及页面可视区域的大小，确定弹窗的位置，以使弹窗展示时不遮挡目标节点且处于页面可视区域内；根据弹窗的位置，展示弹窗。本发明提供的弹窗展示方法、装置以及存储介质和电子设备，不仅能够避免弹窗遮挡目标节点影响用户使用，也能够使弹窗和目标节点产生视觉上的关联，便于用户对应查阅。

Description

弹窗展示方法、装置以及存储介质和电子设备

技术领域

本发明涉及计算机信息处理技术领域，尤其是一种弹窗展示方法、装 置以及存储介质和电子设备。

背景技术

弹窗是在用户当前页面中通过弹出的方式展示的一种信息窗口，弹窗 一般比当前页面小，悬浮在当前页面之上。由于弹窗具有醒目的特征，经 常被用来作为重要消息的推送。

目前，弹窗技术已被广泛应用于各种场景，例如，通过弹窗对企业关 联信息进行展示，当用户在展示的企业关系图谱中想要进一步查看某企业 的详细信息时，只需在企业关系图谱中选择相应的公司节点，即可通过弹 窗查看某个公司节点的详情信息。

在现有技术中，弹窗的显示位置通常是固定的，而弹窗的显示位置固 定很可能会导致弹窗遮挡对用户而言比较重要或者用户当前需要参考的信 息，这将会影响用户体验，如图1所示，当用户在企业关系图谱中想要查 看某个企业节点的详细信息时，点击企业节点(即目标节点)，记载企业 节点的详细信息的弹窗会固定显示在企业关系图谱的最左侧，遮挡了大部 分的企业关系图谱，并且弹窗不能与点击的企业节点产生视觉上的关联关系，降低了用户体验感。

发明内容

为克服上述现有技术存在的不足，本发明之一目的在于提供一种弹窗 展示方法、装置以及存储介质和电子设备，以避免弹窗遮挡目标节点影响 用户使用，同时使弹窗和目标节点产生视觉上的关联，便于用户对应查阅。

本发明之另一目的在于提供一种弹窗展示方法、装置以及存储介质和 电子设备，以在进行多层级弹窗展示时，通过调整各层级弹窗大小，使用 户想要查阅的下级弹窗能够在页面可视区域内进行展示，为用户查阅提供 了便捷，提升了用户体验感。

为达到上述目的，本发明提供了一种弹窗展示方法，该方法包括：

接收对目标节点的弹窗展示指令，获取目标节点对应的弹窗信息；

获取目标节点的位置和大小以及页面可视区域的大小，并根据目标节 点的位置和大小以及页面可视区域的大小，确定弹窗的位置，以使弹窗展 示时不遮挡目标节点且处于页面可视区域内；

根据弹窗的位置，展示弹窗。

可选地，获取目标节点的位置和大小以及页面可视区域的大小，并根 据目标节点的位置和大小以及页面可视区域的大小，确定弹窗的位置，包 括：

获取目标节点的中心坐标和大小以及页面可视区域的大小；

根据目标节点的中心坐标与页面可视区域的边界的距离以及目标节点 的大小，调整弹窗的坐标位置。

可选地，根据目标节点的中心坐标与页面可视区域的边界的距离以及 目标节点的大小，调整弹窗的坐标位置，包括：

当目标节点的中心坐标的横坐标小于或等于页面可视区域的宽度的一 半时，通过确定弹窗的最左上角顶点的坐标以确定弹窗的坐标位置；

或者，当目标节点的中心坐标的横坐标大于页面可视区域的宽度的一 半时，通过确定弹窗最右上角顶点的坐标以确定弹窗的坐标位置。

可选地，当目标节点的中心坐标的横坐标小于或等于页面可视区域的 宽度的一半时，通过确定弹窗的最左上角顶点的坐标以确定弹窗的坐标位 置，包括：确定弹窗的最左上角顶点的横坐标大于或等于目标节点的中心 坐标的横坐标与目标节点的宽度的一半之和，弹窗的最左上角顶点的纵坐 标根据目标节点的中心到页面可视区域的底部边界的距离是否小于弹窗的 高度确定；

或者，当目标节点的中心坐标的横坐标大于页面可视区域的宽度的一 半时，通过确定弹窗最右上角顶点的坐标以确定弹窗的坐标位置，包括： 确定弹窗最右上角顶点的横坐标小于或等于目标节点的中心坐标的横坐标 与目标节点的宽度的一半之差，弹窗最右上角顶点的纵坐标根据目标节点 的中心到页面可视区域的底部边界的距离是否小于弹窗的高度确定。

可选地，弹窗的最左上角顶点的纵坐标根据目标节点的中心到页面可 视区域的底部边界的距离是否小于弹窗的高度确定，包括：若目标节点的 中心坐标的纵坐标与弹窗的高度之和大于页面可视区域的高度，则弹窗的 最左上角顶点的纵坐标为页面可视区域的高度与弹窗的高度之差；若目标 节点的中心坐标的纵坐标与弹窗的高度之和小于或等于页面可视区域的高 度，则弹窗的最左上角顶点的纵坐标为目标节点的中心坐标的纵坐标；

或者，弹窗最右上角顶点的纵坐标根据目标节点的中心到页面可视区 域的底部边界的距离是否小于弹窗的高度确定，包括：若目标节点的中心 坐标的纵坐标与弹窗的高度之和大于页面可视区域的高度，则弹窗的最右 上角顶点的纵坐标为页面可视区域的高度与弹窗的高度之差；若目标节点 的中心坐标的纵坐标与弹窗的高度之和小于或等于页面可视区域的高度， 则弹窗的最右上角顶点的纵坐标为目标节点的中心坐标的纵坐标。

可选地，该方法还包括：

若在弹窗展示时接收到目标节点大小改变触发事件，则重新获取目标 节点的位置和大小以及页面可视区域的大小，并根据重新确定的目标节点 的位置和大小以及页面可视区域的大小，重新确定弹窗的位置。

可选地，该方法还包括：

若用户触发当前弹窗的下级弹窗展示且当前弹窗位于目标节点的右 侧，则判断当前弹窗的最右上角顶点到页面可视区域的右侧纵向边界的距 离是否大于或等于下级弹窗的宽度；

若当前弹窗的最右上角顶点到页面可视区域的右侧纵向边界的距离大 于或等于下级弹窗的宽度，确定下级弹窗的最左上角顶点的横坐标大于或 等于当前弹窗的最右上角顶点的横坐标；或者，若当前弹窗的最右上角顶 点到页面可视区域的右侧纵向边界的距离小于下级弹窗的宽度，缩放下级 弹窗，或者缩放当前弹窗和/或更前级弹窗，以使当前弹窗的最右上角顶点 到页面可视区域的右侧纵向边界的距离大于或等于下级弹窗的宽度；

下级弹窗的最左上角顶点的纵坐标根据目标节点的中心到页面可视区 域的底部边界的距离是否小于下级弹窗的高度确定。

可选地，该方法还包括：

若用户触发当前弹窗的下级弹窗展示且当前弹窗位于目标节点的左 侧，则判断当前弹窗的最左上角顶点到页面可视区域的左侧纵向边界的距 离是否大于或等于下级弹窗的宽度；

若当前弹窗的最左上角顶点到页面可视区域的左侧纵向边界的距离大 于或等于下级弹窗的宽度，确定下级弹窗的最右上角顶点的横坐标小于或 等于当前弹窗的最左上角顶点的横坐标；或者，若当前弹窗的最左上角顶 点到页面可视区域的左侧纵向边界的距离小于下级弹窗的宽度，缩放下级 弹窗，或者缩放当前弹窗和/或更前级弹窗，以使当前弹窗的最左上角顶点 到页面可视区域的左侧纵向边界的距离大于或等于下级弹窗的宽度；

下级弹窗的最右上角顶点的纵坐标根据目标节点的中心到页面可视区 域的底部边界的距离是否小于下级弹窗的高度确定。

可选地，下级弹窗的最左上角顶点的纵坐标根据目标节点的中心到页 面可视区域的底部边界的距离是否小于下级弹窗的高度确定，包括：若目 标节点的中心坐标的纵坐标与下级弹窗的高度之和大于页面可视区域的高 度，则下级弹窗的最左上角顶点的纵坐标为页面可视区域的高度与下级弹 窗的高度之差；若目标节点的中心坐标的纵坐标与下级弹窗的高度之和小 于或等于页面可视区域的高度，则下级弹窗的最左上角顶点的纵坐标为目 标节点的中心坐标的纵坐标；

或者，下级弹窗的最右上角顶点的纵坐标根据目标节点的中心到页面 可视区域的底部边界的距离是否小于下级弹窗的高度确定，包括：若目标 节点的中心坐标的纵坐标与下级弹窗的高度之和大于页面可视区域的高 度，则下级弹窗的最右上角顶点的纵坐标为页面可视区域的高度与下级弹 窗的高度之差；若目标节点的中心坐标的纵坐标与下级弹窗的高度之和小 于或等于页面可视区域的高度，则下级弹窗的最右上角顶点的纵坐标为目 标节点的中心坐标的纵坐标。

为达到上述目的，本发明还提供了一种弹窗展示装置，该装置包括：

弹窗信息获取模块，用于接收对目标节点的弹窗展示指令，获取目标 节点对应的弹窗信息；

弹窗位置调整模块，用于获取目标节点的位置和大小以及页面可视区 域的大小，并根据目标节点的位置和大小以及页面可视区域的大小，确定 弹窗的位置，以使弹窗展示时不遮挡目标节点且处于页面可视区域内；

弹窗展示模块，用于根据弹窗的位置，展示弹窗。

为达上述目的，本发明还提供一种存储介质，其上存储有计算机程序， 计算机程序被处理器执行时实现上述弹窗展示方法的步骤。

为达上述目的，本发明还提供一种电子设备，包括存储器、处理器及 存储；在存储器上并可在处理器上运行的计算机程序，其特征在于，处理 器执行计算机程序时实现上述弹窗展示方法的步骤。

本发明提供的弹窗展示方法、装置以及存储介质和电子设备，通过在 展示目标节点的弹窗时，先基于目标节点的位置和大小以及页面可视区域 的大小确定弹窗的位置，以使弹窗展示时不遮挡目标节点且处于页面可视 区域内，这不仅能够避免对目标节点的遮挡，也能够使弹窗和目标节点产 生视觉上关联，增强用户的体验，此外，在进行多层级弹窗展示时，通过 调整各层级弹窗大小，使用户想要查阅的下级弹窗能够在页面可视区域内进行展示，为用户查阅提供了便捷，提升了用户体验感。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

通过结合附图对本发明实施例进行更详细的描述，本发明的上述以及 其他目的、特征和优势将变得更加明显。附图用来提供对本发明实施例的 进一步理解，并且构成说明书的一部分，与本发明实施例一起用于解释本 发明，并不构成对本发明的限制。在附图中，相同的参考标号通常代表相 同部件或步骤。

图1是现有技术弹窗遮挡目标节点的示意图；

图2是本发明一示例性实施例提供的弹窗展示方法的流程示意图；

图3及图4是本发明一示例性实施例中确定弹窗最左上角顶点的坐标 的示意图；

图5及图6是本发明一示例性实施例中确定弹窗最右上角顶点的坐标 的示意图；

图7是本发明一示例性实施例中的弹窗展示效果示意图；

图8是本发明一示例性实施例提供的弹窗展示装置的结构示意图；

图9是本发明一示例性实施例提供的电子设备的结构。

具体实施方式

下面，将参考附图详细地描述根据本发明的示例实施例。显然，所描 述的实施例仅仅是本发明的一部分实施例，而不是本发明的全部实施例， 应理解，本发明不受这里描述的示例实施例的限制。

应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步 骤的相对布置、数字表达式和数值不限制本发明的范围。

本领域技术人员可以理解，本发明实施例中的“第一”、“第二”等 术语仅用于区别不同步骤、设备或模块等，既不代表任何特定技术含义， 也不表示它们之间的必然逻辑顺序。

还应理解，在本发明实施例中，“多个”可以指两个或两个以上，“至 少一个”可以指一个、两个或两个以上。

还应理解，对于本发明实施例中提及的任一部件、数据或结构，在没 有明确限定或者在前后文给出相反启示的情况下，一般可以理解为一个或 多个。

另外，本发明中术语“和/或”，仅仅是一种描述关联对象的关联关系， 表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时 存在A和B，单独存在B这三种情况。另外，本发明中字符“/”，一般表 示前后关联对象是一种“或”的关系。

还应理解，本发明对各个实施例的描述着重强调各个实施例之间的不 同之处，其相同或相似之处可以相互参考，为了简洁，不再一一赘述。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并 不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作 为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨 论，但在适当情况下，技术、方法和设备应当被视为说明书的一部分。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一 旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步 讨论。

本发明实施例可以应用于终端设备、计算机系统、服务器等电子设备， 其可与众多其它通用或专用计算系统环境或配置一起操作。适于与终端设 备、计算机系统、服务器等电子设备一起使用的众所周知的终端设备、计 算系统、环境和/或配置的例子包括但不限于：个人计算机系统、服务器计 算机系统、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的系统、 机顶盒、可编程消费电子产品、网络个人电脑、小型计算机系统﹑大型计 算机系统和包括上述任何系统的分布式云计算技术环境，等等。

终端设备、计算机系统、服务器等电子设备可以在由计算机系统执行 的计算机系统可执行指令(诸如程序模块)的一般语境下描述。通常，程序 模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们 执行特定的任务或者实现特定的抽象数据类型。计算机系统/服务器可以在 分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络 链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于 包括存储设备的本地或远程计算系统存储介质上。

示例性方法

图2是本发明一示例性实施例提供的弹窗展示方法的流程示意图。如 图2所示，该方法包括以下步骤：

步骤101：接收对目标节点的弹窗展示指令，获取目标节点对应的弹 窗信息；

本发明实施例中的方法可应用于电子设备上，该电子设备可以是任意 具有移动通信功能的移动终端，包括但不限于智能手机、平板电脑等智能 电子设备，也可以是个人电脑。任何可以进行页面弹窗展示的电子设备均 可适用本发明实施例中的方法。

在本发明实施例中，页面上可以有一个或多个可进行弹窗显示的节点。 例如，页面为显示企业关系图谱的页面，其上具有多个节点，如公司名称 节点、主要人员节点、子公司名称节点等，对于每个节点，可以通过弹窗 进一步展示其详情信息。

当用户在显示企业关系图谱的页面中对某一目标节点进行触发操作， 如对其中的公司名称节点进行点击操作，则会触发对该目标节点展示弹窗 的弹窗展示指令，当系统获取到该弹窗展示指令时，则通过弹窗接口从服 务端请求该目标节点对应的弹窗数据，然后服务端通过弹窗接口返回该目 标节点对应的弹窗信息，其中，该弹窗信息主要包括该目标节点对应的弹 窗的详情数据信息，而该目标节点对应的弹窗的详情数据信息包括但不限 于弹窗的宽度w和高度h、对应的页面的ID、弹窗详情信息以及跳转地址 等。

当然，在本发明实施例中，用户对目标节点的操作并不仅限于点击操 作，也可以是滚动操作等会造成目标节点大小改变的操作。以电脑端的鼠 标滚轮的滚动操作为例，滚动操作会产生onMouseDown或onMouseUp事 件改变目标节点的缩放倍率，在未触发弹窗操作时，该滚动操作仅会改变 目标节点的大小，而在已有弹窗展示时该onMouseDown或onMouseUp事 件不仅会改变目标节点的大小，同时会触发已展示弹窗的弹窗位置的更新。

步骤102：获取目标节点的位置和大小以及页面可视区域的大小，并 根据目标节点的位置和大小以及页面可视区域的大小，确定弹窗的位置， 以使弹窗展示时不遮挡目标节点且处于页面可视区域内。

具体地，步骤102包括：

步骤1021：获取目标节点的中心坐标和大小以及页面可视区域的大小。

在本发明实施例中，以目标节点为圆形节点为例，当用户对目标节点 进行点击操作时，可通过页面脚本获取到当前点击的目标节点的中心坐标 和半径，以当前页面为H5页面，通过canvas画板实现为例，页面可视区 域的大小即为canvas画板的大小，一般来说，canvas画板大小与当前电子 设备的屏幕的分辨率大小一致，本发明不以此为限制。

具体地，当某个目标节点被点击时，则对应点击到Paper.js(一个开源 的矢量图形脚本框架，运行于HTML5 Canvas(画板)之上)中的group 的item节点上，通过在group中获取目标节点的中心坐标和半径，该目标 节点的中心坐标为相对页面可视区域(即canvas画板)原点坐标轴的坐标。

可选地，当接收到目标节点大小改变触发事件时，例如在PC电脑端， 用户通过鼠标滚轮对目标节点进行滚动操作时，如onMouseDown或 onMouseUp，此时，可通过group获取目标节点的中心坐标、缩放前半径 以及缩放倍率，并根据缩放倍率和缩放前半径确定目标节点缩放后半径的 大小。

当然，点击操作的情况也可以理解为缩放倍率为1的情形，即，可理 解为通过group获取目标节点的中心坐标、操作前的半径以及缩放倍率， 根据缩放倍率和操作前的半径获得操作后半径的大小。

步骤1022：根据目标节点的中心坐标与页面可视区域的边界的距离以 及目标节点的大小，调整弹窗的坐标位置。

在本发明实施例中，当获取目标节点的中心坐标相对于canvas画板原 点坐标轴的坐标为(x,y)，获取屏幕canvas画板的宽度width和高度height， 并进行如下判断：

步骤10221：当目标节点的中心坐标的横坐标小于或等于页面可视区 域的宽度的一半时，通过确定弹窗的最左上角顶点的坐标以确定弹窗的坐 标位置；

可选地，步骤10221具体包括：确定弹窗的最左上角顶点的横坐标大 于或等于目标节点的中心坐标的横坐标与目标节点的宽度的一半之和，弹 窗的最左上角顶点的纵坐标根据目标节点的中心到页面可视区域的底部边 界的距离是否小于弹窗的高度确定。

可选地，弹窗的最左上角顶点的纵坐标根据目标节点的中心到页面可 视区域的底部边界的距离是否小于弹窗的高度确定，包括：若目标节点的 中心坐标的纵坐标与弹窗的高度之和大于页面可视区域的高度，则弹窗的 最左上角顶点的纵坐标为页面可视区域的高度与弹窗的高度之差；若目标 节点的中心坐标的纵坐标与弹窗的高度之和小于或等于页面可视区域的高 度，则弹窗的最左上角顶点的纵坐标为目标节点的中心坐标的纵坐标

在本发明实施例的一种具体实现方式中，若目标节点的中心坐标的横 坐标x≤(1/2)×width，如图3和图4所示，则将弹窗的最左上角顶点的横 坐标x_弹确定为x_弹≥x+r，r为目标节点的半径，优选地，x_弹＝x+r，该弹窗 的最左上角顶点的纵坐标则根据目标节点的中心到canvas画板(即页面可 视区域)的底部边界的距离是否小于弹窗的高度h来确定。若目标节点的 中心到canvas画板的底部边界的距离小于或等于弹窗的高度，即目标节点 的中心坐标的纵坐标与弹窗的高度之和小于或等于canvas画板的高度，y+h ≤height，则该弹窗的最左上角顶点的纵坐标y_弹确定为y_弹＝y，如图3所 示；若目标节点的中心到canvas画板的底部边界的距离大于弹窗的高度， 即目标节点的中心坐标的纵坐标与弹窗的高度之和大于canvas画板的高 度，y+h>height，则弹窗的最左上角顶点的纵坐标y_弹确定为y_弹＝height-h， 如图4所示。

步骤10222：当目标节点的中心坐标的横坐标大于页面可视区域的宽 度的一半时，通过确定弹窗最右上角顶点的坐标以确定弹窗的坐标位置。

可选地，步骤10222具体包括：确定弹窗最右上角顶点的横坐标小于 或等于目标节点的中心坐标的横坐标与目标节点的宽度的一半之差，弹窗 最右上角顶点的纵坐标根据目标节点的中心到页面可视区域的底部边界的 距离是否小于弹窗的高度确定。

可选地，弹窗最右上角顶点的纵坐标根据目标节点的中心到页面可视 区域的底部边界的距离是否小于弹窗的高度确定，包括：若目标节点的中 心坐标的纵坐标与弹窗的高度之和大于页面可视区域的高度，则弹窗的最 右上角顶点的纵坐标为页面可视区域的高度与弹窗的高度之差；若目标节 点的中心坐标的纵坐标与弹窗的高度之和小于或等于页面可视区域的高 度，则弹窗的最右上角顶点的纵坐标为目标节点的中心坐标的纵坐标。

在本发明实施例的一种具体实现方式中，若目标节点的中心坐标的横 坐标x>(1/2)×width，如图5和图6所示，则将弹窗的最右上角顶点的横坐 标x_弹确定为x_弹≤x-r，r为目标节点的半径，优选地，横坐标x_弹确定为 x_弹＝x-r，该弹窗的最右上角顶点的纵坐标则根据目标节点的中心到canvas 画板的底部边界的距离是否小于弹窗的高度h来确定。若目标节点的中心 到canvas画板的底部边界的距离小于或等于弹窗的高度，即目标节点的中 心坐标的纵坐标y+h≤height，则该弹窗的最右上角顶点的纵坐标y_弹确定 为y_弹＝y，如图5所示；若目标节点的中心到canvas画板的底部边界的距 离大于弹窗的高度，即目标节点的中心坐标的纵坐标与弹窗的高度之和大 于canvas画板的高度，y+h>height，则该弹窗的最右上角顶点的纵坐标y_弹 确定为y_弹＝height-h，如图6所示。

需要说明的是，步骤1021、步骤1022、步骤10221和步骤10222在图 中未示出。

步骤103：根据弹窗的位置，展示弹窗。

具体地，首先根据步骤102确定好弹窗的最左上角顶点或最右上角顶 点的坐标位置，即确定了弹窗的DOM节点位置，然后根据步骤101获取 的弹窗信息在确定的弹窗的位置展示该弹窗的DOM节点详情信息。

由于具体的弹窗展示采用现有技术，在此不予赘述。如图7所示为本 发明实施例中对“某国际文化发展有限公司”目标节点点击后的弹窗展示 结果图。

在本发明实施例的一种可选实施方式中，本实施例中的方法还包括： 若在弹窗展示时接收到目标节点大小改变触发事件，则重新获取目标节点 的位置和大小以及页面可视区域的大小，并根据重新确定的目标节点的位 置和大小以及页面可视区域的大小，重新确定弹窗的位置。也就是说，当 在弹窗展示时接收到目标节点大小改变触发事件，则返回步骤102，以重 新确定弹窗的位置。这种方式能够在用户缩放页面可视区域后，根据缩放比例，灵活调整弹窗的位置，避免弹窗遮挡目标节点，提高用户体验感。

在本发明实施例中，当用户对目标节点展示弹窗时，通过触发产生了 目标节点大小改变事件，以PC电脑端的页面的弹窗为例，假设用户通过 鼠标滚轮滚动产生了onMouseDown或onMouseUp事件，则返回步骤102， 根据paper.js中item节点的onMouseDown或onMouseUp事件来确定事件 后目标节点的中心坐标和大小，从而重新确定弹窗的位置，以使得重新确 定后的弹窗不会遮挡改变后的目标节点。当然，对于移动终端的页面的弹窗，若用户通过触摸屏触摸触发了目标节点大小改变触发事件，同样也返 回步骤102以重新确定弹窗的位置，在此不予赘述。

可选地，在本发明实施例还可以对多层级弹窗进行优化展示，其包括 两种可选实施方式，具体如下所述：

第一种可选实施方式，本发明实施例中的方法还包括：

若用户触发当前弹窗的下级弹窗展示且当前弹窗位于目标节点的右 侧，则判断当前弹窗的最右上角顶点到页面可视区域的右侧纵向边界的距 离是否大于或等于下级弹窗的宽度；

若当前弹窗的最右上角顶点到页面可视区域的右侧纵向边界的距离大 于或等于下级弹窗的宽度，确定下级弹窗的最左上角顶点的横坐标大于或 等于当前弹窗的最右上角顶点的横坐标；或者，若当前弹窗的最右上角顶 点到页面可视区域的右侧纵向边界的距离小于下级弹窗的宽度，缩放下级 弹窗，或者缩放当前弹窗和/或更前级弹窗，以使当前弹窗的最右上角顶点 到页面可视区域的右侧纵向边界的距离大于或等于下级弹窗的宽度；

下级弹窗的最左上角顶点的纵坐标根据目标节点的中心到页面可视区 域的底部边界的距离是否小于下级弹窗的高度确定。具体地，下级弹窗的 最左上角顶点的纵坐标根据目标节点的中心到页面可视区域的底部边界的 距离是否小于下级弹窗的高度确定，包括：若目标节点的中心坐标的纵坐 标与下级弹窗的高度之和大于页面可视区域的高度，则下级弹窗的最左上 角顶点的纵坐标为页面可视区域的高度与下级弹窗的高度之差；若目标节 点的中心坐标的纵坐标与下级弹窗的高度之和小于或等于页面可视区域的 高度，则下级弹窗的最左上角顶点的纵坐标为目标节点的中心坐标的纵坐 标。

第二种可选实施方式，本发明实施例中的方法还包括：

若用户触发当前弹窗的下级弹窗展示且当前弹窗位于目标节点的左 侧，则判断当前弹窗的最左上角顶点到页面可视区域的左侧纵向边界的距 离是否大于或等于下级弹窗的宽度；

若当前弹窗的最左上角顶点到页面可视区域的左侧纵向边界的距离大 于或等于下级弹窗的宽度，确定下级弹窗的最右上角顶点的横坐标小于或 等于当前弹窗的最左上角顶点的横坐标；或者，若当前弹窗的最左上角顶 点到页面可视区域的左侧纵向边界的距离小于下级弹窗的宽度，缩放下级 弹窗，或者缩放当前弹窗和/或更前级弹窗，以使当前弹窗的最左上角顶点 到页面可视区域的左侧纵向边界的距离大于或等于下级弹窗的宽度；

下级弹窗的最右上角顶点的纵坐标根据目标节点的中心到页面可视区 域的底部边界的距离是否小于下级弹窗的高度确定。具体地，下级弹窗的 最右上角顶点的纵坐标根据目标节点的中心到页面可视区域的底部边界的 距离是否小于下级弹窗的高度确定，包括：若目标节点的中心坐标的纵坐 标与下级弹窗的高度之和大于页面可视区域的高度，则下级弹窗的最右上 角顶点的纵坐标为页面可视区域的高度与下级弹窗的高度之差；若目标节 点的中心坐标的纵坐标与下级弹窗的高度之和小于或等于页面可视区域的 高度，则下级弹窗的最右上角顶点的纵坐标为目标节点的中心坐标的纵坐 标。

可选地，当用户触发展示下级弹窗时，其关注的焦点一般会在下级弹 窗上，因此，为了使用户更加清楚地浏览下级弹窗，即使当前弹窗到与当 前弹窗同侧的页面可视区域的边界对应的区域可以正常容纳显示下级弹 窗，在展示该下级弹窗时，根据预设的缩放比例对当前弹窗和/或更前级弹 窗大小进行缩放调整，以便用户更加清楚地浏览下级弹窗。

其中，预设的缩放比例本领域技术人员可以根据实际需要进行选择， 此处不作限定。

具体地，若一级弹窗到与一级弹窗同侧的页面可视区域的边界对应的 区域可以容纳二级弹窗，为了用户更为清楚地浏览二级弹窗，对一级弹窗 根据预设的缩放比例进行缩放，以便凸显二级弹窗的展示。

以当前弹窗为目标节点的一级弹窗为例，若一级弹窗到与一级弹窗同 侧的页面可视区域的边界对应的区域不能容纳二级弹窗时，则根据计算的 一级弹窗到与一级弹窗同侧的页面可视区域边界的距离以及二级弹窗的宽 度，确定二级弹窗的缩放比例，该缩放比例以能将该二级弹窗展示于该一 级弹窗到与一级弹窗同侧的页面可视区域的边界对应的区域为宜，例如， 一级弹窗到与一级弹窗同侧的页面可视区域的边界的距离为d，二级弹窗 的宽度为d1，d<d1，则确定缩放比例为小于或等于d/d1，然后根据确定的 缩放比例缩放该二级弹窗并将其展示于该一级弹窗到与一级弹窗同侧的页 面可视区域的边界对应的区域。

在本实施例中，当所述当前弹窗到页面可视区域边界的距离不能容纳 该下级弹窗，则根据当前弹窗到页面可视区域边界的距离、下级弹窗的大 小以及当前级和/或更前级弹窗的大小确定缩放比例，根据缩放比例缩放当 前级和/或更前级弹窗，缩放后的当前弹窗到页面可视区域边界的区域则可 正常展示所述下级弹窗，则将下级弹窗展示于缩放后的当前弹窗到页面可 视区域边界的区域内。

例如，若一级弹窗到与一级弹窗同侧的页面可视区域的边界对应的区 域不能容纳二级弹窗时，假设一级弹窗到与一级弹窗同侧的页面可视区域 的边界的距离为d，二级弹窗的宽度为d1，其中d<d1，当前弹窗和/或更前 级弹窗的宽度为d2，则确定缩放比例为小于或等于(d+d2-d1)/d2，根据该缩 放比例对当前弹窗和/或更前级弹窗进行缩放，缩放后的一级弹窗到与一级 弹窗同侧的页面可视区域的边界对应的区域则可正常展示该二级弹窗，则 将二级弹窗展示于缩放后一级弹窗到与一级弹窗同侧的页面可视区域的边 界对应的区域内。

本发明提供的弹窗展示方法，通过在展示目标节点的弹窗时，先基于 目标节点的位置和大小以及页面可视区域的大小确定弹窗的位置，以使弹 窗展示时不遮挡目标节点且处于页面可视区域内，这不仅能够避免对目标 节点的遮挡，也能够使弹窗和目标节点产生视觉上关联，增强用户的体验， 此外，在进行多层级弹窗展示时，通过调整各层级弹窗大小，使用户想要 查阅的下级弹窗能够在页面可视区域内进行展示，为用户查阅提供了便捷， 提升了用户体验感。

示例性装置

图8是本发明一示例性实施例提供的弹窗展示装置的系统结构图。如 图8所示，该装置包括：

弹窗信息获取模块801，用于接收对目标节点的弹窗展示指令，获取 目标节点对应的弹窗信息；

弹窗位置调整模块802，用于获取目标节点的位置和大小以及页面可 视区域的大小，并根据目标节点的位置和大小以及页面可视区域的大小， 确定弹窗的位置，以使弹窗展示时不遮挡目标节点且处于页面可视区域内；

弹窗展示模块803，用于根据弹窗的位置，展示弹窗。

可选地，弹窗位置调整模块802具体用于：

获取目标节点的中心坐标和大小以及页面可视区域的大小；

根据目标节点的中心坐标与页面可视区域的边界的距离以及目标节点 的大小，调整弹窗的坐标位置。

可选地，根据目标节点的中心坐标与页面可视区域的边界的距离以及 目标节点的大小，调整弹窗的坐标位置，包括：

当目标节点的中心坐标的横坐标小于或等于页面可视区域的宽度的一 半时，通过确定弹窗的最左上角顶点的坐标以确定弹窗的坐标位置；

或者，当目标节点的中心坐标的横坐标大于页面可视区域的宽度的一 半时，通过确定弹窗最右上角顶点的坐标以确定弹窗的坐标位置。

可选地，当目标节点的中心坐标的横坐标小于或等于页面可视区域的 宽度的一半时，通过确定弹窗的最左上角顶点的坐标以确定弹窗的坐标位 置，包括：确定弹窗的最左上角顶点的横坐标大于或等于目标节点的中心 坐标的横坐标与目标节点的宽度的一半之和，弹窗的最左上角顶点的纵坐 标根据目标节点的中心到页面可视区域的底部边界的距离是否小于弹窗的 高度确定；

或者，当目标节点的中心坐标的横坐标大于页面可视区域的宽度的一 半时，通过确定弹窗最右上角顶点的坐标以确定弹窗的坐标位置，包括： 确定弹窗最右上角顶点的横坐标小于或等于目标节点的中心坐标的横坐标 与目标节点的宽度的一半之差，弹窗最右上角顶点的纵坐标根据目标节点 的中心到页面可视区域的底部边界的距离是否小于弹窗的高度确定。

可选地，弹窗的最左上角顶点的纵坐标根据目标节点的中心到页面可 视区域的底部边界的距离是否小于弹窗的高度确定，包括：若目标节点的 中心坐标的纵坐标与弹窗的高度之和大于页面可视区域的高度，则弹窗的 最左上角顶点的纵坐标为页面可视区域的高度与弹窗的高度之差；若目标 节点的中心坐标的纵坐标与弹窗的高度之和小于或等于页面可视区域的高 度，则弹窗的最左上角顶点的纵坐标为目标节点的中心坐标的纵坐标；

或者，弹窗最右上角顶点的纵坐标根据目标节点的中心到页面可视区 域的底部边界的距离是否小于弹窗的高度确定，包括：若目标节点的中心 坐标的纵坐标与弹窗的高度之和大于页面可视区域的高度，则弹窗的最右 上角顶点的纵坐标为页面可视区域的高度与弹窗的高度之差；若目标节点 的中心坐标的纵坐标与弹窗的高度之和小于或等于页面可视区域的高度， 则弹窗的最右上角顶点的纵坐标为目标节点的中心坐标的纵坐标。

可选地，该方法还包括：

若在弹窗展示时接收到目标节点大小改变触发事件，则重新获取目标 节点的位置和大小以及页面可视区域的大小，并根据重新确定的目标节点 的位置和大小以及页面可视区域的大小，重新确定弹窗的位置。

可选地，该方法还包括：

若用户触发当前弹窗的下级弹窗展示且当前弹窗位于目标节点的右 侧，则判断当前弹窗的最右上角顶点到页面可视区域的右侧纵向边界的距 离是否大于或等于下级弹窗的宽度；

若当前弹窗的最右上角顶点到页面可视区域的右侧纵向边界的距离大 于或等于下级弹窗的宽度，确定下级弹窗的最左上角顶点的横坐标大于或 等于当前弹窗的最右上角顶点的横坐标；或者，若当前弹窗的最右上角顶 点到页面可视区域的右侧纵向边界的距离小于下级弹窗的宽度，缩放下级 弹窗，或者缩放当前弹窗和/或更前级弹窗，以使当前弹窗的最右上角顶点 到页面可视区域的右侧纵向边界的距离大于或等于下级弹窗的宽度；

下级弹窗的最左上角顶点的纵坐标根据目标节点的中心到页面可视区 域的底部边界的距离是否小于下级弹窗的高度确定。

可选地，该方法还包括：

若用户触发当前弹窗的下级弹窗展示且当前弹窗位于目标节点的左 侧，则判断当前弹窗的最左上角顶点到页面可视区域的左侧纵向边界的距 离是否大于或等于下级弹窗的宽度；

若当前弹窗的最左上角顶点到页面可视区域的左侧纵向边界的距离大 于或等于下级弹窗的宽度，确定下级弹窗的最右上角顶点的横坐标小于或 等于当前弹窗的最左上角顶点的横坐标；或者，若当前弹窗的最左上角顶 点到页面可视区域的左侧纵向边界的距离小于下级弹窗的宽度，缩放下级 弹窗，或者缩放当前弹窗和/或更前级弹窗，以使当前弹窗的最左上角顶点 到页面可视区域的左侧纵向边界的距离大于或等于下级弹窗的宽度；

下级弹窗的最右上角顶点的纵坐标根据目标节点的中心到页面可视区 域的底部边界的距离是否小于下级弹窗的高度确定。

可选地，下级弹窗的最左上角顶点的纵坐标根据目标节点的中心到页 面可视区域的底部边界的距离是否小于下级弹窗的高度确定，包括：若目 标节点的中心坐标的纵坐标与下级弹窗的高度之和大于页面可视区域的高 度，则下级弹窗的最左上角顶点的纵坐标为页面可视区域的高度与下级弹 窗的高度之差；若目标节点的中心坐标的纵坐标与下级弹窗的高度之和小 于或等于页面可视区域的高度，则下级弹窗的最左上角顶点的纵坐标为目 标节点的中心坐标的纵坐标；

或者，下级弹窗的最右上角顶点的纵坐标根据目标节点的中心到页面 可视区域的底部边界的距离是否小于下级弹窗的高度确定，包括：若目标 节点的中心坐标的纵坐标与下级弹窗的高度之和大于页面可视区域的高 度，则下级弹窗的最右上角顶点的纵坐标为页面可视区域的高度与下级弹 窗的高度之差；若目标节点的中心坐标的纵坐标与下级弹窗的高度之和小 于或等于页面可视区域的高度，则下级弹窗的最右上角顶点的纵坐标为目 标节点的中心坐标的纵坐标。

本发明实施例提供的弹窗展示方法与本发明实施例提供的弹窗展示装置 相对应，其他描述均可参照对本发明实施例提供的弹窗展示方法的描述，此处 不再赘述。

本发明提供的弹窗展示装置，通过在展示目标节点的弹窗时，先基于 目标节点的位置和大小以及页面可视区域的大小确定弹窗的位置，以使弹 窗展示时不遮挡目标节点且处于页面可视区域内，这不仅能够避免对目标 节点的遮挡，也能够使弹窗和目标节点产生视觉上关联，增强用户的体验， 此外，在进行多层级弹窗展示时，通过调整各层级弹窗大小，使用户想要 查阅的下级弹窗能够在页面可视区域内进行展示，为用户查阅提供了便捷， 提升了用户体验感。

示例性电子设备

图9是本发明一示例性实施例提供的电子设备的结构。该电子设备可 以是第一设备和第二设备中的任一个或两者、或与它们独立的单机设备， 该单机设备可以与第一设备和第二设备进行通信，以从它们接收所采集到 的输入信号。如图9所示，电子设备90包括一个或多个处理器91和存储 器92。

处理器91可以是中央处理单元(CPU)或者具有数据处理能力和/或 指令执行能力的其他形式的处理单元，并且可以控制电子设备中的其他组 件以执行期望的功能。

存储器92可以包括一个或多个计算机程序产品，所述计算机程序产品 可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失 性存储器。所述易失性存储器例如可以包括随机存取存储器(RAM)和/ 或高速缓冲存储器(cache)等。所述非易失性存储器例如可以包括只读存 储器(ROM)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一 个或多个计算机程序指令，处理器91可以运行所述程序指令，以实现上文 所述的本公开的各个实施例的软件程序的弹窗展示方法以及/或者其他期 望的功能。在一个示例中，电子设备还可以包括：输入装置93和输出装置 94，这些组件通过总线系统和/或其他形式的连接机构(未示出)互连。

此外，该输入装置93还可以包括例如键盘、鼠标等等。

该输出装置94可以向外部输出各种信息。该输出装置94可以包括例 如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等 等。

当然，为了简化，图9中仅示出了该电子设备中与本公开有关的组件 中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据 具体应用情况，电子设备还可以包括任何其他适当的组件。

示例性计算机程序产品和计算机可读存储介质

除了上述方法和设备以外，本公开的实施例还可以是计算机程序产品， 其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述 处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施 例的弹窗展示方法中的步骤。

所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编 写用于执行本公开实施例操作的程序代码，所述程序设计语言包括面向对 象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语 言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算 设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部 分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本公开的实施例还可以是计算机可读存储介质，其上存储有计 算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执 行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的弹窗 展示方法中的步骤。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。 可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以 包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件， 或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包 括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器 (RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或 闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁 存储器件、或者上述的任意合适的组合。

以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是， 在本公开中提及的优点、优势、效果等仅是示例而非限制，不能认为这些 优点、优势、效果等是本公开的各个实施例必须具备的。另外，上述公开 的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节 并不限制本公开为必须采用上述具体的细节来实现。

本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明 的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互 参见即可。对于系统实施例而言，由于其与方法实施例基本对应，所以描 述的比较简单，相关之处参见方法实施例的部分说明即可。

本公开中涉及的器件、装置、设备、系统的方框图仅作为例示性的例 子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配 置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这 些器件、装置、设备、系统。诸如“包括”、“包含”、“具有”等等的词语是 开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇 “或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是 如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使 用。

可能以许多方式来实现本公开的方法和装置。例如，可通过软件、硬 件、固件或者软件、硬件、固件的任何组合来实现本公开的方法和装置。 用于所述方法的步骤的上述顺序仅是为了进行说明，本公开的方法的步骤 不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实 施例中，还可将本公开实施为记录在记录介质中的程序，这些程序包括用 于实现根据本公开的方法的机器可读指令。因而，本公开还覆盖存储用于 执行根据本公开的方法的程序的记录介质。

还需要指出的是，在本公开的装置、设备和方法中，各部件或各步骤 是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效 方案。提供所公开的方面的以上描述以使本领域的任何技术人员能够做出 或者使用本公开。对这些方面的各种修改对于本领域技术人员而言是非常 显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本公 开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在 此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将 本公开的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方 面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添 加和子组合。

Claims (12)

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

接收对目标节点的弹窗展示指令，获取所述目标节点对应的弹窗信息；

获取所述目标节点的位置和大小以及页面可视区域的大小，并根据所述目标节点的位置和大小以及所述页面可视区域的大小，确定弹窗的位置，以使所述弹窗展示时不遮挡所述目标节点且处于所述页面可视区域内；

根据所述弹窗的位置，展示所述弹窗。

2.如权利要求1所述的弹窗展示方法，其特征在于，所述获取所述目标节点的位置和大小以及页面可视区域的大小，并根据所述目标节点的位置和大小以及所述页面可视区域的大小，确定弹窗的位置，包括：

获取所述目标节点的中心坐标和大小以及页面可视区域的大小；

根据所述目标节点的中心坐标与所述页面可视区域的边界的距离以及所述目标节点的大小，调整弹窗的坐标位置。

3.如权利要求2所述的弹窗展示方法，其特征在于，所述根据所述目标节点的中心坐标与所述页面可视区域的边界的距离以及所述目标节点的大小，调整弹窗的坐标位置，包括：

当所述目标节点的中心坐标的横坐标小于或等于所述页面可视区域的宽度的一半时，通过确定所述弹窗的最左上角顶点的坐标以确定所述弹窗的坐标位置；

或者，当所述目标节点的中心坐标的横坐标大于所述页面可视区域的宽度的一半时，通过确定所述弹窗最右上角顶点的坐标以确定所述弹窗的坐标位置。

4.如权利要求3所述的弹窗展示方法，其特征在于，所述当所述目标节点的中心坐标的横坐标小于或等于所述页面可视区域的宽度的一半时，通过确定所述弹窗的最左上角顶点的坐标以确定所述弹窗的坐标位置，包括：确定所述弹窗的最左上角顶点的横坐标大于或等于所述目标节点的中心坐标的横坐标与所述目标节点的宽度的一半之和，所述弹窗的最左上角顶点的纵坐标根据所述目标节点的中心到所述页面可视区域的底部边界的距离是否小于所述弹窗的高度确定；

或者，所述当所述目标节点的中心坐标的横坐标大于所述页面可视区域的宽度的一半时，通过确定所述弹窗最右上角顶点的坐标以确定所述弹窗的坐标位置，包括：确定所述弹窗最右上角顶点的横坐标小于或等于所述目标节点的中心坐标的横坐标与所述目标节点的宽度的一半之差，所述弹窗最右上角顶点的纵坐标根据所述目标节点的中心到所述页面可视区域的底部边界的距离是否小于所述弹窗的高度确定。

5.如权利要求4所述的弹窗展示方法，其特征在于，所述弹窗的最左上角顶点的纵坐标根据所述目标节点的中心到所述页面可视区域的底部边界的距离是否小于所述弹窗的高度确定，包括：若所述目标节点的中心坐标的纵坐标与所述弹窗的高度之和大于所述页面可视区域的高度，则所述弹窗的最左上角顶点的纵坐标为所述页面可视区域的高度与所述弹窗的高度之差；若所述目标节点的中心坐标的纵坐标与所述弹窗的高度之和小于或等于所述页面可视区域的高度，则所述弹窗的最左上角顶点的纵坐标为所述目标节点的中心坐标的纵坐标；

或者，所述弹窗最右上角顶点的纵坐标根据所述目标节点的中心到所述页面可视区域的底部边界的距离是否小于所述弹窗的高度确定，包括：若所述目标节点的中心坐标的纵坐标与所述弹窗的高度之和大于所述页面可视区域的高度，则所述弹窗的最右上角顶点的纵坐标为所述页面可视区域的高度与所述弹窗的高度之差；若所述目标节点的中心坐标的纵坐标与所述弹窗的高度之和小于或等于所述页面可视区域的高度，则所述弹窗的最右上角顶点的纵坐标为所述目标节点的中心坐标的纵坐标。

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

若在所述弹窗展示时接收到目标节点大小改变触发事件，则重新获取所述目标节点的位置和大小以及所述页面可视区域的大小，并根据重新确定的所述目标节点的位置和大小以及所述页面可视区域的大小，重新确定所述弹窗的位置。

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

若用户触发当前弹窗的下级弹窗展示且所述当前弹窗位于所述目标节点的右侧，则判断所述当前弹窗的最右上角顶点到所述页面可视区域的右侧纵向边界的距离是否大于或等于所述下级弹窗的宽度；

若所述当前弹窗的最右上角顶点到所述页面可视区域的右侧纵向边界的距离大于或等于所述下级弹窗的宽度，确定所述下级弹窗的最左上角顶点的横坐标大于或等于所述当前弹窗的最右上角顶点的横坐标；或者，若所述当前弹窗的最右上角顶点到所述页面可视区域的右侧纵向边界的距离小于所述下级弹窗的宽度，缩放所述下级弹窗，或者缩放所述当前弹窗和/或更前级弹窗，以使所述当前弹窗的最右上角顶点到所述页面可视区域的右侧纵向边界的距离大于或等于所述下级弹窗的宽度；

所述下级弹窗的最左上角顶点的纵坐标根据所述目标节点的中心到所述页面可视区域的底部边界的距离是否小于所述下级弹窗的高度确定。

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

若用户触发当前弹窗的下级弹窗展示且所述当前弹窗位于所述目标节点的左侧，则判断所述当前弹窗的最左上角顶点到所述页面可视区域的左侧纵向边界的距离是否大于或等于所述下级弹窗的宽度；

若所述当前弹窗的最左上角顶点到所述页面可视区域的左侧纵向边界的距离大于或等于所述下级弹窗的宽度，确定所述下级弹窗的最右上角顶点的横坐标小于或等于所述当前弹窗的最左上角顶点的横坐标；或者，若所述当前弹窗的最左上角顶点到所述页面可视区域的左侧纵向边界的距离小于所述下级弹窗的宽度，缩放所述下级弹窗，或者缩放所述当前弹窗和/或更前级弹窗，以使所述当前弹窗的最左上角顶点到所述页面可视区域的左侧纵向边界的距离大于或等于所述下级弹窗的宽度；

所述下级弹窗的最右上角顶点的纵坐标根据所述目标节点的中心到所述页面可视区域的底部边界的距离是否小于所述下级弹窗的高度确定。

9.如权利要求7或8所述的弹窗展示方法，其特征在于，所述下级弹窗的最左上角顶点的纵坐标根据所述目标节点的中心到所述页面可视区域的底部边界的距离是否小于所述下级弹窗的高度确定，包括：若所述目标节点的中心坐标的纵坐标与所述下级弹窗的高度之和大于所述页面可视区域的高度，则所述下级弹窗的最左上角顶点的纵坐标为所述页面可视区域的高度与所述下级弹窗的高度之差；若所述目标节点的中心坐标的纵坐标与所述下级弹窗的高度之和小于或等于所述页面可视区域的高度，则所述下级弹窗的最左上角顶点的纵坐标为所述目标节点的中心坐标的纵坐标；

或者，所述下级弹窗的最右上角顶点的纵坐标根据所述目标节点的中心到所述页面可视区域的底部边界的距离是否小于所述下级弹窗的高度确定，包括：若所述目标节点的中心坐标的纵坐标与所述下级弹窗的高度之和大于所述页面可视区域的高度，则所述下级弹窗的最右上角顶点的纵坐标为所述页面可视区域的高度与所述下级弹窗的高度之差；若所述目标节点的中心坐标的纵坐标与所述下级弹窗的高度之和小于或等于所述页面可视区域的高度，则所述下级弹窗的最右上角顶点的纵坐标为所述目标节点的中心坐标的纵坐标。

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

弹窗信息获取模块，用于接收对目标节点的弹窗展示指令，获取所述目标节点对应的弹窗信息；

弹窗位置调整模块，用于获取所述目标节点的位置和大小以及页面可视区域的大小，并根据所述目标节点的位置和大小以及所述页面可视区域的大小，确定弹窗的位置，以使所述弹窗展示时不遮挡所述目标节点且处于所述页面可视区域内；

弹窗展示模块，用于根据所述弹窗的位置，展示所述弹窗。

11.一种存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至9任意一项所述弹窗展示方法的步骤。

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

Images