弹窗展示方法与系统技术方案

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

【技术实现步骤摘要】
弹窗展示方法与系统
本申请实施例涉及页面弹窗展示
，尤其涉及一种弹窗展示方法、系统、计算机设备及可读存储介质。
技术介绍
随着应用程序所支持的业务越来越复杂，经常会涉及到大量的弹窗，通过这些弹窗进行内容展示。基于不同产品和运行的弹窗，弹窗中一般会展示一些广告内容或推荐内容等。例如，在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(DocumentObjectModel，文档对象模型)，是HTML和XML文档的编程接口。HTML(HyperTextMarkupLanguage，超文本标记语言)，是用于创建网页的标准标记语言，定义有网页内容的含义和本文档来自技高网...

【技术保护点】
1.一种弹窗展示方法，其特征在于，所述方法包括：/n在显示界面上展示HTML页面，所述HTML页面的包括弹窗管理模块；/n检测关联于所述HTML页面的弹窗触发事件；/n根据所述弹窗触发事件，通过所述弹窗管理模块执行以下操作：动态创建对应于所述弹窗触发事件的目标弹窗元素，所述目标弹窗元素用于定义目标弹窗；及/n渲染所述目标弹窗元素，以将所述目标弹窗展示到所述显示界面。/n

【技术特征摘要】
1.一种弹窗展示方法，其特征在于，所述方法包括：
在显示界面上展示HTML页面，所述HTML页面的包括弹窗管理模块；
检测关联于所述HTML页面的弹窗触发事件；
根据所述弹窗触发事件，通过所述弹窗管理模块执行以下操作：动态创建对应于所述弹窗触发事件的目标弹窗元素，所述目标弹窗元素用于定义目标弹窗；及
渲染所述目标弹窗元素，以将所述目标弹窗展示到所述显示界面。


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


3.根据权利要求1所述的弹窗展示方法，其特征在于，还包括：
将所述目标弹窗元素的堆叠顺序属性的属性值设置为可设置范围内的最大值。


4.根据权利要求1所述的弹窗展示方法，其特征在于，还包括：
检测关联于所述目标弹窗的弹窗关闭事件；及
根据所述弹窗关闭事件，通过所述弹窗管理模块将所述目标弹窗元素从所述主体中移除。


5.根据权利要求1所述的弹窗展示方法，其特征在于，还包括：
若所述目标弹窗的运行环境为Windows系统，则将HTML页面的overflow-y属性设置为overlay；其中，overflow-y属性用于规定是否对内容的上/下边缘进行裁剪。


6.根据权利要求1至5任意一项所述的弹窗展示方法，其特征在于，所述目标弹窗元素为内联框架元素；所述动态创建对应于所述弹窗触发事件的目标弹窗元素，包括：
通过所述弹窗管理模块中的工厂函数封装iframe弹窗实例；其中，所述工厂函数基于传入参数进行实例创建和封装，所述iframe弹窗实例用于执行所述目标弹窗；
其中，所述iframe弹窗实例用于以所述内联框架元素的形式被添加到所述主体中。


7.根据权利要求6所述的弹窗展示方法，其特征在于，所述传入参数包括样式属性参数、弹窗大小以及所述iframe弹窗实例包括用于位置处理的CSS代码；
所述通过所述弹窗管理模块中的工厂函数封装iframe弹窗实例，包括：
若弹窗位置为居中，则根据所述弹窗大小生成用于控制所述目标弹窗居中显示的...

【专利技术属性】
技术研发人员：张凡，
申请(专利权)人：上海哔哩哔哩科技有限公司，
类型：发明
国别省市：上海;31