一种网页中弹窗的处理方法和装置制造方法及图纸

本发明专利技术公开了一种网页中弹窗的处理方法和装置，用于同时实现弹窗的水平垂直居中与动画效果，且不需要进行JS动态计算。本发明专利技术实施例提供一种网页中弹窗的处理方法，包括：获取超文本标记语言HTML网页结构中的遮罩层元素和弹窗层元素，并将所述遮罩层元素和所述弹窗层元素之间的层级关系配置为父子元素；在所述遮罩层元素关联的第一层叠样式表CSS代码中配置预设的布局样式；在所述弹窗层元素关联的第二CSS代码中配置预设的动画样式。

【技术实现步骤摘要】

本专利技术涉及计算机
，尤其涉及一种网页中弹窗的处理方法和装置。
技术介绍
在进行超文本标记语言(英文全称：Hyper Text Markup Language，英文简称：HTML)网页设计时，需要单独将HTML设计的脚本与专门对HTML的美观设计的层叠样式表(英文全称：Cascading Style Sheets，英文简称：CSS)代码进行编辑。CSS作为一种计算机标记语言，其在标准网页设计中负责网页内容的表现，CSS能够对网页中各个显示对象的位置排版进行精确控制，支持几乎所有的字体、字号、样式。目前的HTML结构中在网页的主体内容之上可以显示弹窗，弹窗能够悬浮在主体内容之上，在HTML页面关联的CSS代码中可以将弹窗设置为水平垂直居中样式。在目前的CSS定位到水平垂直居中的解决方案中主要有两种，第一种方案是通过负margin实现，第二种方案通过CSS3的transform实现。在第一种方案中，CSS水平垂直居中样式需要计算弹窗的高度和宽度，因为弹窗的宽度和高度是自动撑开的，所以需要JavaScript(简称：JS)动态的计算弹窗的宽度和高度，因此会比较耗费处理资源。而第二种方案中，由于使用CSS3的transform，虽然解决了JS动态计算的问题，但是如果弹窗需要使用transform进行动画，就无法实现弹窗的水平垂直居中样式，如果弹窗需要使用水平垂直居中样式，就无法实现弹窗的动画效果。因此在上述的CSS3的transform解决方案中，当前的弹窗在处理水平垂直居中与动画效果时只能二选一，无法同时实现弹窗的水平垂直居中与动画效果。
技术实现思路
本专利技术实施例提供了一种网页中弹窗的处理方法和装置，用于同时实现弹窗的水平垂直居中与动画效果，且不需要进行JS动态计算。为解决上述技术问题，本专利技术实施例提供以下技术方案：第一方面，本专利技术实施例提供一种网页中弹窗的处理方法，包括：获取超文本标记语言HTML网页结构中的遮罩层元素和弹窗层元素，并将所述遮罩层元素和所述弹窗层元素之间的层级关系配置为父子元素；在所述遮罩层元素关联的第一层叠样式表CSS代码中配置预设的布局样式；在所述弹窗层元素关联的第二CSS代码中配置预设的动画样式。第二方面，本专利技术实施例还提供一种网页中弹窗的处理装置，包括：弹窗层嵌套模块，用于获取超文本标记语言HTML网页结构中的遮罩层元素和弹窗层元素，并将所述遮罩层元素和所述弹窗层元素之间的层级关系配置为父子元素；布局配置模块，用于在所述遮罩层元素关联的第一层叠样式表CSS代码中配置预设的布局样式；动画配置模块，用于在所述弹窗层元素关联的第二CSS代码中配置预设的动画样式。从以上技术方案可以看出，本专利技术实施例具有以下优点：在本专利技术实施例中，获取HTML网页结构中的遮罩层元素和弹窗层元素，并将遮罩层元素和弹窗层元素之间的层级关系配置为父子元素，在遮罩层元素关联的第一CSS代码中配置预设的布局样式，在弹窗层元素关联的第二CSS代码中配置预设的动画样式。本专利技术实施例中在HTML网页结构中配置有遮罩层元素，并且该遮罩层元素配置为弹窗层元素的父元素，因此本专利技术实施例中弹窗层元素是嵌套在遮罩层元素里面，因此在第一CSS代码中配置布局样式后，弹窗层元素也可以按照该布局样式来显示，从而不需要进行JS动态计算。该布局样式也可以设置为水平垂直居中样式，并且本专利技术实施例中第二CSS代码中配置动画样式，弹窗层元素也可以按照该动画样式来显示。因此本专利技术实施例中可以同时实现弹窗的水平垂直居中与动画效果。附图说明为了更清楚地说明本专利技术实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域的技术人员来讲，还可以根据这些附图获得其他的附图。图1为本专利技术实施例提供的一种网页中弹窗的处理方法的流程方框示意图；图2-a为本专利技术实施例提供的一种网页中弹窗的处理装置的组成结构示意图；图2-b为本专利技术实施例提供的一种网页中弹窗的处理装置的组成结构示意图；图3为本专利技术实施例提供的网页中弹窗的处理方法应用于终端的组成结构示意图。具体实施方式本专利技术实施例提供了一种网页中弹窗的处理方法和装置，用于同时实现弹窗的水平垂直居中与动画效果，且不需要进行JS动态计算。为使得本专利技术的专利技术目的、特征、优点能够更加的明显和易懂，下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本专利技术一部分实施例，而非全部实施例。基于本专利技术中的实施例，本领域的技术人员所获得的所有其他实施例，都属于本专利技术保护的范围。本专利技术的说明书和权利要求书及上述附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，以便包含一系列单元的过程、方法、系统、产品或设备不必限于那些单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它单元。现有技术中在处理弹窗时可以使用CSS3的移动(英文名称：transform)属性的具体代码如下：其中，该方法虽然解决了JS动态计算的问题，但是如果使用transform进行动画就会出现错乱，因为根据CSS样式作用原则，权重高的样式将会替换权重低的样式，而平级的权重后面的样式将会覆盖前面的样式，所以如果需要进行缩放动画设置，例如transform:scale(1.2)将会覆盖上面的transform:translate(-50％,-50％)权重，所以在需要使用transform进行动画的时候就不可以显示水平垂直居中样式，因为该水平垂直居中样式会被动画样式覆盖掉，同理如果弹窗需要使用水平垂直居中样式，就无法实现弹窗的动画效果。因此在上述的CSS3的transform解决方案中，当前的弹窗在处理水平垂直居中与动画效果时只能二选一，无法同时实现弹窗的水平垂直居中与动画效果。在本专利技术实施例中网页结构中可以配置遮罩层，该遮罩层设置在弹窗和主体内容之间，该遮罩层是弹窗和主体内容之间的一层半透明的蒙板。本专利技术实施例中，在网页结构的主体内容之上有一个图层为遮罩层，在遮罩层之上还设置有弹窗层，这两个图层中只有相重叠的地方才会被显示。也就是说在遮罩层中有对象的地方就是透明的，可以看到弹窗层中的对象，而没有在遮罩层中没有对象的地方就是不透明的，遮罩层中相应位置的对象是看不见的。本专利技术实施例中将遮罩层和弹窗层之间的层级关系配置为父子层，从而可以弹窗的布局样式和动画样式的同时显示。接下来分别进行详细说明。本专利技术网页中弹窗的处理方法的一个实施例，具体可以应用于对网页中弹窗的处理过程中，请参阅图1所示，本专利技术一个实施例提供的网页中弹窗的处理方法，可以包括如下步骤：101、获取HTML网页结构中的遮罩层元素和弹窗层元素，并将遮罩层元素和弹窗层元素之间的层级关系配置为父子元素。在本专利技术实施例中，HTML网页结构是网络的通用语言，它允许网页制作过程中建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到。本专利技术实施例中创建的HTML网页结构中除了配置有弹窗层元素，还可以引入遮罩层元素，该遮罩层元素可以将与遮罩层相链接的网页中主体内容图形中的图像遮盖起来，从而创建出多样显示的网页效果。从HTML网页结构本文档来自技高网...

【技术保护点】
一种网页中弹窗的处理方法，其特征在于，包括：获取超文本标记语言HTML网页结构中的遮罩层元素和弹窗层元素，并将所述遮罩层元素和所述弹窗层元素之间的层级关系配置为父子元素；在所述遮罩层元素关联的第一层叠样式表CSS代码中配置预设的布局样式；在所述弹窗层元素关联的第二CSS代码中配置预设的动画样式。

【技术特征摘要】
1.一种网页中弹窗的处理方法，其特征在于，包括：获取超文本标记语言HTML网页结构中的遮罩层元素和弹窗层元素，并将所述遮罩层元素和所述弹窗层元素之间的层级关系配置为父子元素；在所述遮罩层元素关联的第一层叠样式表CSS代码中配置预设的布局样式；在所述弹窗层元素关联的第二CSS代码中配置预设的动画样式。2.根据权利要求1所述的方法，其特征在于，所述将所述遮罩层元素和所述弹窗层元素之间的层级关系配置为父子元素，包括：在所述HTML网页结构中插入HTML标签，将所述遮罩层元素写入所述HTML标签中，并在所述HTML标签中写入所述遮罩层元素之后的分段section标签中继续写入所述弹窗层元素。3.根据权利要求1所述的方法，其特征在于，所述在所述遮罩层元素关联的第一层叠样式表CSS代码中配置预设的布局样式，包括：将第一CSS代码中的显示display属性配置为弹性布局flex属性，使用所述flex属性配置预设的布局样式。4.根据权利要求1所述的方法，其特征在于，所述在所述弹窗层元素关联的第二CSS代码中配置预设的动画样式，包括：在第二CSS代码中动画开始前添加动画样式对应的类，并在所述第二CSS代码中动画结束后移除所述动画样式对应的类。5.根据权利要求1至4中任一项所述的方法，其特征在于，所述方法还包括：根据所述第一CSS代码中的布局样式和所述第二CSS代码中的动画样式在网页显示区域对所述HTML网页结构中的所述遮罩层元素和所...

【专利技术属性】
技术研发人员：徐远朝，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东;44