CN110597583A - 模态框的吸顶方法和装置、存储介质、电子设备 - Google Patents

Abstract

本公开实施例公开了一种模态框的吸顶方法和装置、存储介质、电子设备，其中，方法包括：通过浏览器接收模态框的触发请求，根据触发请求显示所请求的模态框，并获取模态框的高度；根据模态框的高度与浏览器的高度之间的关系，确定是否对模态框中的滚动距离进行监控；响应于对所述模态框中的滚动距离进行监控，根据监控到所述模态框中的滚动距离与所述模态框的高度之间的关系，确定是否对所述模态框执行吸顶操作；本实施例通过根据模态框的高度和监控滚动距离确定是否执行吸顶操作，实现了根据模态框的高度自动吸顶，使用户在浏览模态框超出当前页面的内容时，可同时对需要置顶的内容进行查看，无需反复滚动查看，提高了对模态框的处理效率。

Description

模态框的吸顶方法和装置、存储介质、电子设备

技术领域

本公开涉及页面显示技术，尤其是一种模态框的吸顶方法和装置、存储介质、电子设备。

背景技术

现有技术的浏览器页面中的模态框很少会对滚动事件做处理，当模态框中需要展现大量内容时，页面必然会出现滚动条，那么浏览到一半时，无法立即查看页面最顶部的内容，导致用户在浏览后面的内容时，想要重新查看前面的内容时，需要重新滚动至页面顶部，无法定位至刚才查看的位置。

发明内容

为了解决上述技术问题，提出了本公开。本公开的实施例提供了一种模态框的吸顶方法和装置、存储介质、电子设备。

根据本公开实施例的一个方面，提供了一种模态框的吸顶方法，包括：

通过浏览器接收模态框的触发请求，根据所述触发请求显示所请求的模态框，并获取所述模态框的高度；

根据所述模态框的高度与所述浏览器的高度之间的关系，确定是否对所述模态框中的滚动距离进行监控；

响应于对所述模态框中的滚动距离进行监控，根据监控到所述模态框中的滚动距离与所述模态框的高度之间的关系，确定是否对所述模态框执行吸顶操作。

可选地，所述模态框包括第一区域、第二区域和第三区域；

所述根据监控到所述模态框中的滚动距离与所述模态框的高度之间的关系，确定是否对所述模态框执行吸顶操作，包括：

响应于监控到所述模态框中向下的滚动距离大于或等于所述第一区域与所述第二区域的高度之和，对所述模态框执行吸顶操作；

响应于监控到所述模态框中向下的滚动距离小于所述第一区域与所述第二区域的高度之和，不对所述模态框执行吸顶操作。

可选地，所述对所述模态框执行吸顶操作，包括：

复制所述第一区域中的内容作为置顶内容；

跟所述置顶内容在所述模态框的显示区域顶部新建一个固定置顶区域；其中，所述显示区域为所述模态框当前在浏览器中可见的全部区域；

将所述置顶内容存入所述固定置顶区域，实现吸顶操作。

可选地，还包括：

响应于监控到所述模态框中向上的滚动距离与所述向下的滚动距离的差值大于或等于所述第一区域与所述第二区域的高度之和；

删除所述固定置顶区域，还原所述模态框。

可选地，所述根据所述模态框的高度与所述浏览器的高度之间的关系，确定对所述模态框中的滚动距离进行监控，包括：

响应于所述模态框的高度大于所述浏览器的高度，确定对所述模态框中的滚动距离进行监控；

响应于所述模态框的高度小于或等于所述浏览器的高度，确定不对所述模态框中的滚动距离进行监控。

可选地，所述通过浏览器接收模态框的触发请求，根据所述触发请求显示所请求的模态框，并获取所述模态框的高度之前，还包括：

获取所述模态框对应的模板元素；

将所述模板元素追加到所述浏览器对应的页面元素底部。

可选地，所述通过浏览器接收模态框的触发请求，根据所述触发请求显示所请求的模态框，并获取所述模态框的高度，包括：

通过浏览器接收模态框的触发请求，根据所述触发请求获取相应的后台数据；

根据所述模态框对应的模板元素生成模态框模板，将所述后台数据写入所述模态框模板中相应位置，生成所述模态框并显示；

根据所述模态框模板和所述后台数据的数量，获取所述模态框的高度。

可选地，所述将所述模板元素追加到所述浏览器对应的页面元素底部之后，还包括：

根据所述浏览器的覆盖区域大小建立所述浏览器对应的遮罩层；

禁用所述浏览器和所述遮罩层的滚动。

可选地，所述根据所述触发请求显示所请求的模态框之前，还包括：

根据所述浏览器的宽度和所述模态框的宽度调整所述模态框的显示位置，使所述模态框显示在所述浏览器的居中位置。

根据本公开实施例的另一方面，提供了一种模态框的吸顶装置，包括：

模态框触发模块，用于通过浏览器接收模态框的触发请求，根据所述触发请求显示所请求的模态框，并获取所述模态框的高度；

监控确定模块，用于根据所述模态框的高度与所述浏览器的高度之间的关系，确定是否对所述模态框中的滚动距离进行监控；

吸顶操作模块，用于响应于对所述模态框中的滚动距离进行监控，根据监控到所述模态框中的滚动距离与所述模态框的高度之间的关系，确定是否对所述模态框执行吸顶操作。

可选地，所述模态框包括第一区域、第二区域和第三区域；

所述吸顶操作模块，具体用于响应于监控到所述模态框中向下的滚动距离大于或等于所述第一区域与所述第二区域的高度之和，对所述模态框执行吸顶操作；响应于监控到所述模态框中向下的滚动距离小于所述第一区域与所述第二区域的高度之和，不对所述模态框执行吸顶操作。

可选地，所述吸顶操作模块在对所述模态框执行吸顶操作时，用于复制所述第一区域中的内容作为置顶内容；跟所述置顶内容在所述模态框的显示区域顶部新建一个固定置顶区域；其中，所述显示区域为所述模态框当前在浏览器中可见的全部区域；将所述置顶内容存入所述固定置顶区域，实现吸顶操作。

可选地，所述吸顶操作模块，还用于响应于监控到所述模态框中向上的滚动距离与所述向下的滚动距离的差值大于或等于所述第一区域与所述第二区域的高度之和；删除所述固定置顶区域，还原所述模态框。

可选地，所述监控确定模块，具体用于响应于所述模态框的高度大于所述浏览器的高度，确定对所述模态框中的滚动距离进行监控；响应于所述模态框的高度小于或等于所述浏览器的高度，确定不对所述模态框中的滚动距离进行监控。

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

元素获取模块，用于获取所述模态框对应的模板元素；

元素追加模块，用于将所述模板元素追加到所述浏览器对应的页面元素底部。

可选地，所述模态框触发模块，具体用于通过浏览器接收模态框的触发请求，根据所述触发请求获取相应的后台数据；根据所述模态框对应的模板元素生成模态框模板，将所述后台数据写入所述模态框模板中相应位置，生成所述模态框并显示；根据所述模态框模板和所述后台数据的数量，获取所述模态框的高度。

可选地，所述元素追加模块，还用于根据所述浏览器的覆盖区域大小建立所述浏览器对应的遮罩层；禁用所述浏览器和所述遮罩层的滚动。

可选地，所述模态框触发模块，还用于根据所述浏览器的宽度和所述模态框的宽度调整所述模态框的显示位置，使所述模态框显示在所述浏览器的居中位置。

根据本公开实施例的又一方面，提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序用于执行上述任一是时候了所述的模态框的吸顶方法。

根据本公开实施例的还一方面，提供了一种电子设备，所述电子设备包括：

处理器；

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

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现上述任一实施例所述的模态框的吸顶方法。

基于本公开上述实施例提供的一种模态框的吸顶方法和装置、存储介质、电子设备，通过浏览器接收模态框的触发请求，根据所述触发请求显示所请求的模态框，并获取所述模态框的高度；根据所述模态框的高度与所述浏览器的高度之间的关系，确定是否对所述模态框中的滚动距离进行监控；响应于对所述模态框中的滚动距离进行监控，根据监控到所述模态框中的滚动距离与所述模态框的高度之间的关系，确定是否对所述模态框执行吸顶操作；本实施例通过根据模态框的高度和监控滚动距离确定是否执行吸顶操作，实现了根据模态框的高度自动吸顶，使用户在浏览模态框超出当前页面的内容时，可同时对需要置顶的内容进行查看，无需反复滚动查看，提高了对模态框的处理效率。

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

附图说明

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

图1是本公开一示例性实施例提供的模态框的吸顶方法的流程示意图。

图2是本公开图1所示的实施例中步骤106的一个流程示意图。

图3是本公开图2所示的实施例中步骤1063的一个流程示意图。

图4是本公开图1所示的实施例中步骤106的一个流程示意图。

图5是本公开另一示例性实施例提供的模态框的吸顶方法的流程示意图。

图6是本公开图1所示的实施例中步骤102的一个流程示意图。

图7是本公开一示例性实施例提供的模态框的吸顶装置的结构示意图。

图8是本公开一示例性实施例提供的电子设备的结构图。

具体实施方式

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

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

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

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

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

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

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

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

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

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

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

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

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

申请概述

在实现本公开的过程中，发明人发现，现有技术中对于存在滚动条的模态框，没有提供吸顶功能，因此至少存在以下问题：当用户查看到中间回答时，想要重新查看问题内容时，需重新滚动至页面顶部，无法重新定位至刚才查看位置，使用户操作流程繁琐。

示例性方法

图1是本公开一示例性实施例提供的模态框的吸顶方法的流程示意图。本实施例可应用在电子设备上，如图1所示，包括如下步骤：

步骤102，通过浏览器接收模态框的触发请求，根据触发请求显示所请求的模态框，并获取模态框的高度。

其中，模态框(Modal)是覆盖在父窗体(例如，浏览器)上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。模态框可提供信息、交互等。

步骤104，根据模态框的高度与浏览器的高度之间的关系，确定是否对模态框中的滚动距离进行监控。

在一实施例中，在获取模态框的高度和浏览器的高度之后，如果模态框的高度大于浏览器的高度，就说明模态框在一个不滚动页面中无法完整显示，此时，在模态框中将出现滚动条，即，出现需要吸顶的情况。

步骤106，响应于对模态框中的滚动距离进行监控，根据监控到模态框中的滚动距离与模态框的高度之间的关系，确定是否对模态框执行吸顶操作。

本实施例中，通过达到一定条件，触发吸顶操作，该条件可以根据模态框中的滚动距离与模态框的高度之间的关系确定，例如，在模态框中设置一个触发点，当滚动距离到达该触发点，即可触发吸顶操作；还可以通过其他的触发条件来触发吸顶操作，本实施例不限制具体的触发条件。

本公开上述实施例提供的一种模态框的吸顶方法，通过浏览器接收模态框的触发请求，根据所述触发请求显示所请求的模态框，并获取所述模态框的高度；根据所述模态框的高度与所述浏览器的高度之间的关系，确定是否对所述模态框中的滚动距离进行监控；响应于对所述模态框中的滚动距离进行监控，根据监控到所述模态框中的滚动距离与所述模态框的高度之间的关系，确定是否对所述模态框执行吸顶操作；本实施例通过根据模态框的高度和监控滚动距离确定是否执行吸顶操作，实现了根据模态框的高度自动吸顶，使用户在浏览模态框超出当前页面的内容时，可同时对需要置顶的内容进行查看，无需反复滚动查看，提高了对模态框的处理效率。

如图2所示，在上述图1所示实施例的基础上，其中，模态框包括第一区域、第二区域和第三区域，步骤106可包括如下步骤：

步骤1061，响应于对所述模态框中的滚动距离进行监控，判断监控到模态框中向下的滚动距离是否小于第一区域与第二区域的高度之和，如果是，执行步骤1062，否则，执行步骤1063。

步骤1062，不对模态框执行吸顶操作。

步骤1063，对模态框执行吸顶操作。

可选地，模态框中的第一区域可以为问题区域，第二区域可以包括两个部分：回答输入框和提交按钮，第三区域可以为其他解答区域；通常出现需要吸顶的情况是由于其他解答区域的内容过多，导致在浏览其他解答时，用户忘记前方的问题内容，因此，本实施例将触发吸顶操作的触发点设置在第二区域与第三区域之间的交界处，即，当确定滚动距离超出第一区域与第二区域之和，即可触发吸顶，而当未达到触发点时，不触发吸顶。

如图3所示，在上述图2所示实施例的基础上，步骤1063可包括：

步骤301，复制第一区域中的内容作为置顶内容。

步骤302，跟置顶内容在模态框的显示区域顶部新建一个固定置顶区域。

其中，显示区域为模态框当前在浏览器中可见的全部区域。

步骤303，将置顶内容存入固定置顶区域，实现吸顶操作。

本实施例中，将第一区域作为需要置顶的内容，该第一区域的位置可以是在模态框的顶端或中间位置，本实施例不做限制，例如，模态框中三个区域的分布依次为第一区域、第二区域和第三区域，或依次为第二区域、第一区域和第三区域等，都可以实现；在具体实现吸顶操作时，本实施例将需要吸顶处理的内容进行复制(原第一区域不动)，在模态框滚动后的显示区域的顶部新建一个固定置顶区域，该固定置顶区域不随滚动条滚动，并将需要置顶的第一区域的内容复制到该固定置顶区域中，即实现了吸顶操作，此时，无论用户操作滚动条滚动到哪个位置，都可以在模态框中同时查看到固定置顶区域中的内容。

如图4所示，在上述图1所示实施例的基础上，步骤106可包括如下步骤：

步骤1061，响应于对所述模态框中的滚动距离进行监控，判断监控到模态框中向下的滚动距离是否小于第一区域与第二区域的高度之和，如果是，执行步骤1062，否则，执行步骤1063。

步骤1062，不对模态框执行吸顶操作，返回执行步骤1061。

步骤1063，对模态框执行吸顶操作，执行步骤1064。

步骤1064，响应于监控到模态框中向上的滚动距离与向下的滚动距离的差值大于或等于第一区域与第二区域的高度之和。

步骤1065，删除固定置顶区域，还原模态框。

本实施例中，监控到的滚动距离包括向下的滚动距离和向上的滚动距离，向上的滚动距离表示用户返回查看前面内容，当向上的滚动距离与向下的滚动距离的差值大于或等于第一区域与第二区域的高度之和时，说明对模态框的滚动距离返回了之前触发吸顶操作的触发点的位置，此时，无需吸顶操作，在模态框的当前的显示区域中即可查看到第一区域的内容，因此，本实施例在此时删除固定置顶区域，还原模态框。

在一些可选的实施例中，步骤104可以包括：

响应于模态框的高度大于浏览器的高度，确定对模态框中的滚动距离进行监控；

响应于模态框的高度小于或等于浏览器的高度，确定不对模态框中的滚动距离进行监控。

本实施例中将浏览器作为父窗体，覆盖在浏览器上进行显示的模态框作为子窗体，由于子窗体的大小最大不可能超出父窗体，因此，一个时刻模态框能显示的最大高度为浏览器的高度，当模态框的高度大于浏览器的高度时，说明模态框中存在滚动条，为了查看模态框中的全部内容，需要进行滚动操作，此时可能需要执行吸顶操作，因此，本实施例在此情况下对模块框中的滚动距离进行监控；而当模态框的高度小于或等于浏览器的高度时，说明该模态框不需要滚动条即可完全展示，因此，不需要对该模态框中的滚动距离进行监控。

图5是本公开另一示例性实施例提供的模态框的吸顶方法的流程示意图。本实施例可应用在电子设备上，如图5所示，包括如下步骤：

步骤501，获取模态框对应的模板元素。

可选地，缓存模态框对应的文档对象模型(DOM，Document Object Model)元素，通过获取这些模板元素，在需要显示模态框时，调用DOM元素可生成模态框模板，将后台调用的数据写入该模态框模板即获得模态框，加快了生成模态框的速度，提高了页面渲染效率。

步骤502，将模板元素追加到浏览器对应的页面元素底部。

可选地，根据浏览器的覆盖区域大小建立浏览器对应的遮罩层；禁用浏览器和遮罩层的滚动。

其中，遮罩层的大小可以与浏览器的大小相同，通过遮罩层将浏览器的全部内容遮挡，使模态框弹出时，用户注意力都集中在模态框中。

为了防止监控模态框中的滚动距离时出错，本实施例禁用了浏览器和遮罩层的滚动，例如，使用层叠样式表(css，Cascading Style Sheets)禁用浏览器和遮罩层的滚动；使监控到的滚动距离仅对于模态框中的滚动操作。

步骤102，通过浏览器接收模态框的触发请求，根据触发请求显示所请求的模态框，并获取模态框的高度。

步骤104，根据模态框的高度与浏览器的高度之间的关系，确定是否对模态框中的滚动距离进行监控。

步骤106，响应于对模态框中的滚动距离进行监控，根据监控到模态框中的滚动距离与模态框的高度之间的关系，确定是否对模态框执行吸顶操作。

本实施例通过将模板元素追加到浏览器对应的页面元素底部，避免了由于添加元素导致的浏览器页面显示出错的问题，并且由于提前获取了模态框对应的模态元素，提高了模态框的渲染效率。

如图6所示，在上述图1所示实施例的基础上，步骤102可包括如下步骤：

步骤1021，通过浏览器接收模态框的触发请求，根据触发请求获取相应的后台数据。

步骤1022，根据模态框对应的模板元素生成模态框模板，将后台数据写入模态框模板中相应位置，生成模态框并显示。

步骤1023，根据模态框模板和后台数据的数量，获取模态框的高度。

本实施例中，根据触发请求向后台请求获取相应的后台数据，并接收后台反馈的后台数据，这些后台数据需要在模态框中进行显示，本实施例将这些后台数据写入按照模板元素生成的模态框模板中，生成需要显示的模态框，此时可通过对显示的模态框进行检测确定其高度，或者，根据模态框模板的宽度、模态框模板中数据的数量以及后台数据的数量确定模态框的高度。

在一个可选的实施例中，在显示模态框之前，还可以包括：

根据浏览器的宽度和模态框的宽度调整模态框的显示位置，使模态框显示在浏览器的居中位置。

为了确保不同浏览器下模态框都能够居中显示，在显示模态框之前可先计算一次显示位置，例如，将浏览器的宽度除2之后减去模态框的宽度除2，得到的值即为模态框距离浏览器一侧的距离；并且，当浏览器窗口改变大小时，可再次计算模态框和浏览器的位置，使模态框能够始终居中显示在页面正中间。

本公开实施例提供的任一种模态框的吸顶方法可以由任意适当的具有数据处理能力的设备执行，包括但不限于：终端设备和服务器等。或者，本公开实施例提供的任一种模态框的吸顶方法可以由处理器执行，如处理器通过调用存储器存储的相应指令来执行本公开实施例提及的任一种模态框的吸顶方法。下文不再赘述。

示例性装置

图7是本公开一示例性实施例提供的模态框的吸顶装置的结构示意图。如图7所示，本实施例包括：

模态框触发模块71，用于通过浏览器接收模态框的触发请求，根据触发请求显示所请求的模态框，并获取模态框的高度。

监控确定模块72，用于根据模态框的高度与浏览器的高度之间的关系，确定是否对模态框中的滚动距离进行监控。

吸顶操作模块73，用于响应于对模态框中的滚动距离进行监控，根据监控到模态框中的滚动距离与模态框的高度之间的关系，确定是否对模态框执行吸顶操作。

本公开上述实施例提供的一种模态框的吸顶装置，通过浏览器接收模态框的触发请求，根据所述触发请求显示所请求的模态框，并获取所述模态框的高度；根据所述模态框的高度与所述浏览器的高度之间的关系，确定是否对所述模态框中的滚动距离进行监控；响应于对所述模态框中的滚动距离进行监控，根据监控到所述模态框中的滚动距离与所述模态框的高度之间的关系，确定是否对所述模态框执行吸顶操作；本实施例通过根据模态框的高度和监控滚动距离确定是否执行吸顶操作，实现了根据模态框的高度自动吸顶，使用户在浏览模态框超出当前页面的内容时，可同时对需要置顶的内容进行查看，无需反复滚动查看，提高了对模态框的处理效率。

在一些可选的实施例中，模态框包括第一区域、第二区域和第三区域；

吸顶操作模块73，具体用于响应于监控到模态框中向下的滚动距离大于或等于第一区域与第二区域的高度之和，对模态框执行吸顶操作；响应于监控到模态框中向下的滚动距离小于第一区域与第二区域的高度之和，不对模态框执行吸顶操作。

可选地，模态框中的第一区域可以为问题区域，第二区域可以包括两个部分：回答输入框和提交按钮，第三区域可以为其他解答区域；通常出现需要吸顶的情况是由于其他解答区域的内容过多，导致在浏览其他解答时，用户忘记前方的问题内容，因此，本实施例将触发吸顶操作的触发点设置在第二区域与第三区域之间的交界处，即，当确定滚动距离超出第一区域与第二区域之和，即可触发吸顶，而当未达到触发点时，不触发吸顶。

可选地，吸顶操作模块73在对模态框执行吸顶操作时，用于复制第一区域中的内容作为置顶内容；跟置顶内容在模态框的显示区域顶部新建一个固定置顶区域；其中，显示区域为模态框当前在浏览器中可见的全部区域；将置顶内容存入固定置顶区域，实现吸顶操作。

可选地，吸顶操作模块73，还用于响应于监控到模态框中向上的滚动距离与向下的滚动距离的差值大于或等于第一区域与第二区域的高度之和；删除固定置顶区域，还原模态框。

在一些可选的实施例中，监控确定模块72，具体用于响应于模态框的高度大于浏览器的高度，确定对模态框中的滚动距离进行监控；响应于模态框的高度小于或等于浏览器的高度，确定不对模态框中的滚动距离进行监控。

在一些可选的实施例中，本实施例提供的装置还包括：

元素获取模块，用于获取模态框对应的模板元素。

元素追加模块，用于将模板元素追加到浏览器对应的页面元素底部。

本实施例通过将模板元素追加到浏览器对应的页面元素底部，避免了由于添加元素导致的浏览器页面显示出错的问题，并且由于提前获取了模态框对应的模态元素，提高了模态框的渲染效率。

可选地，模态框触发模块71，具体用于通过浏览器接收模态框的触发请求，根据触发请求获取相应的后台数据；根据模态框对应的模板元素生成模态框模板，将后台数据写入模态框模板中相应位置，生成模态框并显示；根据模态框模板和后台数据的数量，获取模态框的高度。

可选地，元素追加模块，还用于根据浏览器的覆盖区域大小建立浏览器对应的遮罩层；禁用浏览器和遮罩层的滚动。

可选地，模态框触发模块71，还用于根据浏览器的宽度和模态框的宽度调整模态框的显示位置，使模态框显示在浏览器的居中位置。

示例性电子设备

下面，参考图8来描述根据本公开实施例的电子设备。该电子设备可以是第一设备100和第二设备200中的任一个或两者、或与它们独立的单机设备，该单机设备可以与第一设备和第二设备进行通信，以从它们接收所采集到的输入信号。

图8图示了根据本公开实施例的电子设备的框图。

如图8所示，电子设备80包括一个或多个处理器81和存储器82。

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

存储器82可以包括一个或多个计算机程序产品，所述计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。所述易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。所述非易失性存储器例如可以包括只读存储器(ROM)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器81可以运行所述程序指令，以实现上文所述的本公开的各个实施例的模态框的吸顶方法以及/或者其他期望的功能。在所述计算机可读存储介质中还可以存储诸如输入信号、信号分量、噪声分量等各种内容。

在一个示例中，电子设备80还可以包括：输入装置83和输出装置84，这些组件通过总线系统和/或其他形式的连接机构(未示出)互连。

例如，在该电子设备是第一设备100或第二设备200时，该输入装置83可以是上述的麦克风或麦克风阵列，用于捕捉声源的输入信号。在该电子设备是单机设备时，该输入装置83可以是通信网络连接器，用于从第一设备100和第二设备200接收所采集的输入信号。

此外，该输入设备83还可以包括例如键盘、鼠标等等。

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

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

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

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

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

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

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

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

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

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

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

还需要指出的是，在本公开的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。

提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本公开。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本公开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

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

Claims (12)

1.一种模态框的吸顶方法，其特征在于，包括：

通过浏览器接收模态框的触发请求，根据所述触发请求显示所请求的模态框，并获取所述模态框的高度；

根据所述模态框的高度与所述浏览器的高度之间的关系，确定是否对所述模态框中的滚动距离进行监控；

响应于对所述模态框中的滚动距离进行监控，根据监控到所述模态框中的滚动距离与所述模态框的高度之间的关系，确定是否对所述模态框执行吸顶操作。

2.根据权利要求1所述的方法，其特征在于，所述模态框包括第一区域、第二区域和第三区域；

所述根据监控到所述模态框中的滚动距离与所述模态框的高度之间的关系，确定是否对所述模态框执行吸顶操作，包括：

响应于监控到所述模态框中向下的滚动距离大于或等于所述第一区域与所述第二区域的高度之和，对所述模态框执行吸顶操作；

响应于监控到所述模态框中向下的滚动距离小于所述第一区域与所述第二区域的高度之和，不对所述模态框执行吸顶操作。

3.根据权利要求2所述的方法，其特征在于，所述对所述模态框执行吸顶操作，包括：

复制所述第一区域中的内容作为置顶内容；

跟所述置顶内容在所述模态框的显示区域顶部新建一个固定置顶区域；其中，所述显示区域为所述模态框当前在浏览器中可见的全部区域；

将所述置顶内容存入所述固定置顶区域，实现吸顶操作。

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

响应于监控到所述模态框中向上的滚动距离与所述向下的滚动距离的差值大于或等于所述第一区域与所述第二区域的高度之和；

删除所述固定置顶区域，还原所述模态框。

5.根据权利要求1-4任一所述的方法，其特征在于，所述根据所述模态框的高度与所述浏览器的高度之间的关系，确定对所述模态框中的滚动距离进行监控，包括：

响应于所述模态框的高度大于所述浏览器的高度，确定对所述模态框中的滚动距离进行监控；

响应于所述模态框的高度小于或等于所述浏览器的高度，确定不对所述模态框中的滚动距离进行监控。

6.根据权利要求1-5任一所述的方法，其特征在于，所述通过浏览器接收模态框的触发请求，根据所述触发请求显示所请求的模态框，并获取所述模态框的高度之前，还包括：

获取所述模态框对应的模板元素；

将所述模板元素追加到所述浏览器对应的页面元素底部。

7.根据权利要求6所述的方法，其特征在于，所述通过浏览器接收模态框的触发请求，根据所述触发请求显示所请求的模态框，并获取所述模态框的高度，包括：

通过浏览器接收模态框的触发请求，根据所述触发请求获取相应的后台数据；

根据所述模态框对应的模板元素生成模态框模板，将所述后台数据写入所述模态框模板中相应位置，生成所述模态框并显示；

根据所述模态框模板和所述后台数据的数量，获取所述模态框的高度。

8.根据权利要求6或7所述的方法，其特征在于，所述将所述模板元素追加到所述浏览器对应的页面元素底部之后，还包括：

根据所述浏览器的覆盖区域大小建立所述浏览器对应的遮罩层；

禁用所述浏览器和所述遮罩层的滚动。

9.根据权利要求1-8任一所述的方法，其特征在于，所述根据所述触发请求显示所请求的模态框之前，还包括：

根据所述浏览器的宽度和所述模态框的宽度调整所述模态框的显示位置，使所述模态框显示在所述浏览器的居中位置。

10.一种模态框的吸顶装置，其特征在于，包括：

模态框触发模块，用于通过浏览器接收模态框的触发请求，根据所述触发请求显示所请求的模态框，并获取所述模态框的高度；

监控确定模块，用于根据所述模态框的高度与所述浏览器的高度之间的关系，确定是否对所述模态框中的滚动距离进行监控；

吸顶操作模块，用于响应于对所述模态框中的滚动距离进行监控，根据监控到所述模态框中的滚动距离与所述模态框的高度之间的关系，确定是否对所述模态框执行吸顶操作。

11.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序用于执行上述权利要求1-9任一所述的模态框的吸顶方法。

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

处理器；

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

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现上述权利要求1-9任一所述的模态框的吸顶方法。