CN109992268B - 弹框实现方法、装置、电子设备、存储介质 - Google Patents

Abstract

本发明提供一种弹框实现方法、装置、电子设备、存储介质，弹框实现方法包括：利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；对material‑ui的对话框进行封装，获得第一模态框；利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示。本发明提供的弹框实现方法及装置实现灵活的弹框。

Description

弹框实现方法、装置、电子设备、存储介质

技术领域

本发明涉及计算机应用技术领域，尤其涉及一种弹框实现方法、装置、电子设备、存储介质。

背景技术

Modal弹框组件是当用户需要处理事务，又不希望跳转页面以致中断工作流程时，打开的一个浮层，承载相应的操作。随着react(react是一个采用声明式，高效而且灵活的用来构建用户界面的框架)技术越来越被更多人使用并关注，目前被广泛使用的react组件库主要有两种：实现了Google's Material Design设计规范的material-ui和蚂蚁金服的的ant-design。

Material-UI是一个实现了Google's Material Design设计规范的react组件库，开箱即用，使用它可以快速搭建出赏心悦目的应用界面。

ant-design服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

在以上所提到的两种组件库中，对于modal组件的实现都没有提供拖动以及缩放的配置接口，而这两种功能在很多场景是非常必要的。例如当用户在Modal中处理事务时想参照页面内容或直接复制一些信息时，目前现有的Modal组件无法满足这些需求，在操作上很受限制。

发明内容

本发明为了克服上述现有技术存在的缺陷，提供一种弹框实现方法、装置、电子设备、存储介质，以实现灵活的弹框。

根据本发明的一个方面，提供一种弹框实现方法，包括：

利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；

对material-ui的对话框进行封装，获得第一模态框；

利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示。

可选地，所述对material-ui的对话框进行封装，获得第一模态框还包括：

所述第一模态框提供信息方法、成功方法、出错方法、警告方法及确认方法中的一个或多个方法。

可选地，所述对material-ui的对话框进行封装，获得第一模态框还包括：

通过基于react的转变库配置所述第一模态框弹出时的显示效果。

可选地，所述第二模态框经由触发于一页面上弹出，所述第二模态框弹出期间，所述页面允许交互操作。

可选地，所述页面配置有第一类内容及第二类内容，所述第一类内容不允许被所述第二模态框遮挡，所述第二类内容允许被所述第二模态框遮挡，所述第二模态框于所述页面上弹出时，确定所述第二模态框弹出时于页面上的弹框位置，基于所述弹框位置调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。

可选地，接收对所述第二模态框的拖动操作，实时确定所述第二模态框于页面上的弹框位置，基于所述弹框位置动态调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。

可选地，接收对所述第二模态框的缩放操作，实时确定所述第二模态框于页面上的弹框位置及覆盖范围，基于所述弹框位置及覆盖范围动态调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。

根据本发明的又一方面，还提供一种弹框实现装置，包括：

函数组件模块，用于利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；

第一模态框模块，用于对material-ui的对话框进行封装，获得第一模态框；

第二模块框模块，用于利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示。

根据本发明的又一方面，还提供一种电子设备，所述电子设备包括：处理器；存储介质，其上存储有计算机程序，所述计算机程序被所述处理器运行时执行如上所述的步骤。

根据本发明的又一方面，还提供一种存储介质，所述存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如上所述的步骤。

相比现有技术，本发明的优势在于：

相对于普通的Modal(模态框)弹框提供了丰富的功能，更具灵活性。通过对基本Dialog(对话)的封装实现了通过简单属性配置即具有拖动以及缩放功能的弹框。当面对这样的需求时，开发人员无需再花费额外的精力便能够轻松实现想要的效果，因而大大提高开发的效率。

附图说明

通过参照附图详细描述其示例实施方式，本发明的上述和其它特征及优点将变得更加明显。

图1示出了根据本发明实施例的弹框实现方法的示意图。

图2示出了根据本发明实施例的弹框实现装置的示意图。

图3示意性示出本公开示例性实施例中一种计算机可读存储介质示意图。

图4示意性示出本公开示例性实施例中一种电子设备示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。

此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

为了解决现有技术的缺陷，以实现灵活的弹框,本发明提供一种弹框实现方法、装置、电子设备、存储介质。

首先参见图1，图1示出了根据本发明实施例的弹框实现方法的示意图。弹框实现方法包括如下步骤：

步骤S110：利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；

步骤S120：对material-ui的对话框进行封装，获得第一模态框；

步骤S130：利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示。

在本发明提供的弹框实现方法中，相对于普通的Modal(模态框)弹框提供了丰富的功能，更具灵活性。通过对基本Dialog(对话)的封装实现了通过简单属性配置即具有拖动以及缩放功能的弹框。当面对这样的需求时，开发人员无需再花费额外的精力便能够轻松实现想要的效果，因而大大提高开发的效率。

具体而言，react的拖动组件库又称为react-draggable库。react的缩放组件库又称为re-resizable库。

在一个具体实施例中，可拖拽以及可放大缩小的函数组件实现过程如下：首先缩放组件库接受一个组件(需实现缩放以及拖拽的组件)将其作为自己子参数(children参数)进行包裹得到可缩放组件，然后再用拖动组件库包裹可缩放组件得到上述函数组件。

具体而言，所述步骤S120可以基于Material-UI，能够实现Material-UI对话框(Dialog)中提供的全部接口。

具体而言，所述步骤S120对material-ui的对话框(Dialog)进行封装，获得第一模态框还可以包括如下步骤：所述第一模态框提供信息方法(info)、成功方法(success)、出错方法(error)、警告方法(warning)及确认方法(confirm)中的一个或多个方法。不同的方法定义了不同类型的的模态框，例如基于不同的触发信息提供不同类型的模态框，且不同类型的模态框可以具有相同或不同的功能(显示信息、提供可供输入的接口、提供可供选择的选项等)，本发明并非以此为限。

具体而言，所述步骤S120对material-ui的对话框进行封装，获得第一模态框还可以包括如下步骤：通过基于react的转变库(transitions)配置所述第一模态框弹出时的显示效果。显示效果可以包括：fade(逐渐消失)、slide(下滑)、collapse(折叠)、grow(扩大)、zoom(上升)等。

具体而言，所述第二模态框经由触发于一页面上弹出，所述第二模态框弹出期间，所述页面允许交互操作。例如，本发明中的第二模态框可以通过配置是否具有背景遮罩，以保证在操作弹框的过程中可以操作页面中的内容。此处所述的操作可以包括选中、复制、上拉、下滑、左右切换等等，本发明并非以此为限。

具体而言，所述页面配置有第一类内容及第二类内容，所述第一类内容不允许被所述第二模态框遮挡，所述第二类内容允许被所述第二模态框遮挡，所述第二模态框于所述页面上弹出时，确定所述第二模态框弹出时于页面上的弹框位置，基于所述弹框位置调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。

在上述实施例中，可以理解，弹出第二模态框的页面中存在部分内容与第二模态框显示的内容相关，若第二模态框覆盖该些内容，则不便于用户同时获取页面上的内容和第二模态框的内容(例如，需要页面上的内容以在第二模态框内输入)，由此，可以通过上述的方式，在弹出第二模态框时，防止这些内容被第二模态框覆盖。所述的第一类内容就是需要显示的内容，所述的第二类内容就是可以覆盖的内容。所述的内容可以包括文字、图片、视频等。在一些实施例中，页面上的第一类内容和第二类内容的划分可以预先确定。在另一些实施例中，页面上的第一类内容位于所要弹出的第二模态框关联的内容，不同的第二模态框关联不同的内容，从而当确定要弹出第二模态框时，可以获取当前要弹出的模态框关联的内容作为第一类内容。在又一些实施例中，为了减少关联内容的储存需求，当确定要弹出的第二模态框时，获取第二模态框所显示的内容，根据第二模态框所显示的内容与页面的内容进行实时匹配(相似度匹配)，从而确定第一类内容，本发明并非以此为限。

进一步地，所述第二模态框于所述页面上弹出时，可以获取第二模态框(例如是矩形模态框)的四个顶点的坐标，以确定第二模态框的弹框位置，从而确定第二模态框覆盖的区域。当存在部分所述第一类内容位于所述第二模态框覆盖的区域时，可以自未被第二模态框覆盖的第二类内容中确定与该第一类内容具有形状、大小的第二类内容，以与该第一类内容进行位置交换，由此，该第一类内容将不会被第二模态框遮挡，而被交换的第二类内容被第二模态框遮挡。当未在第二类内容中匹配到与该第一类内容具有形状、大小的第二类内容时，可以选择与该第一类内容的形状、大小最相近的第二类内容，并使该第一类内容按该第二类内容的形状、大小进行缩放以适应该第二类内容，并按此进行交换。以上仅仅是示意性地描述本发明的一些实现方式，本发明并非以此为限。

具体而言，在上述实施例中，还可以包括接收对所述第二模态框的拖动操作，实时确定所述第二模态框于页面上的弹框位置，基于所述弹框位置动态调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。进一步地，例如，当第二模态框被拖动进而产生位置变更时，根据实时确定的第二模态框(例如是矩形模态框)的四个顶点的坐标，以确定第二模态框的弹框位置，从而确定第二模态框覆盖的区域。当更新的弹框位置存在部分所述第一类内容位于所述第二模态框覆盖的区域时，可以自未被第二模态框覆盖的第二类内容中确定与该第一类内容具有形状、大小的第二类内容，以与该第一类内容进行位置交换，由此，该第一类内容将不会被第二模态框遮挡，而被交换的第二类内容被第二模态框遮挡。当未在第二类内容中匹配到与该第一类内容具有形状、大小的第二类内容时，可以选择与该第一类内容的形状、大小最相近的第二类内容，并使该第一类内容按该第二类内容的形状、大小进行缩放以适应该第二类内容，并按此进行交换。以上仅仅是示意性地描述本发明的一些实现方式，本发明并非以此为限。

具体而言，在上述实施例中，还可以包括接收对所述第二模态框的缩放操作，实时确定所述第二模态框于页面上的弹框位置及覆盖范围，基于所述弹框位置及覆盖范围动态调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。进一步地，例如，当第二模态框被放大进而覆盖到原本未覆盖的第一类内容时，根据实时确定的第二模态框(例如是矩形模态框)的四个顶点的坐标，以确定第二模态框的弹框位置，从而确定第二模态框覆盖的区域。当更新的覆盖区域存在部分所述第一类内容位于所述第二模态框覆盖的区域时，可以自未被第二模态框覆盖的第二类内容中确定与该第一类内容具有形状、大小的第二类内容，以与该第一类内容进行位置交换，由此，该第一类内容将不会被第二模态框遮挡，而被交换的第二类内容被第二模态框遮挡。当未在第二类内容中匹配到与该第一类内容具有形状、大小的第二类内容时，可以选择与该第一类内容的形状、大小最相近的第二类内容，并使该第一类内容按该第二类内容的形状、大小进行缩放以适应该第二类内容，并按此进行交换。当第二模态框被缩小进而退出原本覆盖的第一类内容时，可以还原第一类内容和第二类内容的调整。以上仅仅是示意性地描述本发明的一些实现方式，本发明并非以此为限。

在另一些实施例中，第二模态框的拖动和缩放可以同时进行，上述调整的方式也可以同时进行，本发明并非以此为限。

在一个具体实施例中，本发明提供的方法的代码实现如下：

以上仅仅是示意性地描述本发明的代码化实现，本发明并非以此为限制。

本发明的优势在于，1)相较于普通弹框，发明的弹框可以实现在页面中随意拖动功能；2)本发明的弹框可以实现自由缩放功能；3)本发明中的弹框可以通过配置是否具有背景遮罩，以保证在操作弹框的过程中可以操作页面中的内容；4)额外提供了弹框的几种方法，如info，success，error，warning以及confirm等，同时可配置多种弹框的弹出的动画效果。

本发明还提供一种弹框实现装置，图2示出了根据本发明实施例的弹框实现装置的示意图。弹框实现装置200包括函数组件模块210、第一模态框模块220及第二模块框模块230。

函数组件模块210，用于利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；

第一模态框模块220用于对material-ui的对话框进行封装，获得第一模态框；

第二模块框模块230用于利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示。

在本发明提供的弹框实现装置中，相对于普通的Modal(模态框)弹框提供了丰富的功能，更具灵活性。通过对基本Dialog(对话)的封装实现了通过简单属性配置即具有拖动以及缩放功能的弹框。当面对这样的需求时，开发人员无需再花费额外的精力便能够轻松实现想要的效果，因而大大提高开发的效率。其优势在于，1)相较于普通弹框，发明的弹框可以实现在页面中随意拖动功能；2)本发明的弹框可以实现自由缩放功能；3)本发明中的弹框可以通过配置是否具有背景遮罩，以保证在操作弹框的过程中可以操作页面中的内容；4)额外提供了弹框的几种方法，如info，success，error，warning以及confirm等，同时可配置多种弹框的弹出的动画效果。

图2仅仅是示意性的示出本发明提供的弹框实现装置，在不违背本发明构思的前提下，模块的拆分、合并、增加都在本发明的保护范围之内。本发明提供的弹框实现装置可以由软件、硬件、固件、插件及他们之间的任意组合来实现，本发明并非以此为限。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被例如处理器执行时可以实现上述任意一个实施例中所述弹框实现方法的步骤。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述弹框实现方法部分中描述的根据本发明各种示例性实施方式的步骤。

参考图3所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品400，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

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

所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在租户计算设备上执行、部分地在租户设备上执行、作为一个独立的软件包执行、部分在租户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到租户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

在本公开的示例性实施例中，还提供一种电子设备，该电子设备可以包括处理器，以及用于存储所述处理器的可执行指令的存储器。其中，所述处理器配置为经由执行所述可执行指令来执行上述任意一个实施例中所述弹框实现方法的步骤。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。

下面参照图4来描述根据本发明的这种实施方式的电子设备600。图4显示的电子设备600仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图4所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：至少一个处理单元610、至少一个存储单元620、连接不同系统组件(包括存储单元620和处理单元610)的总线630、显示单元640等。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元610执行，使得所述处理单元610执行本说明书上述弹框实现方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元610可以执行如图1中所示的步骤。

所述存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)6201和/或高速缓存存储单元6202，还可以进一步包括只读存储单元(ROM)6203。

所述存储单元620还可以包括具有一组(至少一个)程序模块6205的程序/实用工具6204，这样的程序模块6205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备600也可以与一个或多个外部设备700(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得租户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器660可以通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、或者网络设备等)执行根据本公开实施方式的上述弹框实现方法。

相比现有技术，本发明的优势在于：

相对于普通的Modal(模态框)弹框提供了丰富的功能，更具灵活性。通过对基本Dialog(对话)的封装实现了通过简单属性配置即具有拖动以及缩放功能的弹框。当面对这样的需求时，开发人员无需再花费额外的精力便能够轻松实现想要的效果，因而大大提高开发的效率。

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

Claims (6)

1.一种弹框实现方法，其特征在于，包括：

利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；

对material-ui的对话框进行封装，获得第一模态框；

利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示，

其中，所述第二模态框经由触发于一页面上弹出，所述第二模态框弹出期间，所述页面允许交互操作，

所述页面配置有第一类内容及第二类内容，所述第一类内容不允许被所述第二模态框遮挡，所述第二类内容允许被所述第二模态框遮挡，所述第二模态框于所述页面上弹出时，确定所述第二模态框弹出时于页面上的弹框位置，基于所述弹框位置调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡，接收对所述第二模态框的拖动操作，实时确定所述第二模态框于页面上的弹框位置，基于所述弹框位置动态调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡，接收对所述第二模态框的缩放操作，实时确定所述第二模态框于页面上的弹框位置及覆盖范围，基于所述弹框位置及覆盖范围动态调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。

2.如权利要求1所述的弹框实现方法，其特征在于，所述对material-ui的对话框进行封装，获得第一模态框还包括：

所述第一模态框提供信息方法、成功方法、出错方法、警告方法及确认方法中的一个或多个方法。

3.如权利要求2所述的弹框实现方法，其特征在于，所述对material-ui的对话框进行封装，获得第一模态框还包括：

通过基于react的转变库配置所述第一模态框弹出时的显示效果。

4.一种弹框实现装置，其特征在于，包括：

函数组件模块，用于利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；

第一模态框模块，用于对material-ui的对话框进行封装，获得第一模态框；

第二模块框模块，用于利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示，

其中，所述第二模态框经由触发于一页面上弹出，所述第二模态框弹出期间，所述页面允许交互操作，

所述页面配置有第一类内容及第二类内容，所述第一类内容不允许被所述第二模态框遮挡，所述第二类内容允许被所述第二模态框遮挡，所述第二模态框于所述页面上弹出时，确定所述第二模态框弹出时于页面上的弹框位置，基于所述弹框位置调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡，接收对所述第二模态框的拖动操作，实时确定所述第二模态框于页面上的弹框位置，基于所述弹框位置动态调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡，接收对所述第二模态框的缩放操作，实时确定所述第二模态框于页面上的弹框位置及覆盖范围，基于所述弹框位置及覆盖范围动态调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。

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

处理器；

存储介质，其上存储有计算机程序，所述计算机程序被所述处理器运行时执行如权利要求1至3任一项所述的方法。

6.一种存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如权利要求1至3任一项所述的方法。

Images