[发明专利]网页弹窗的方法及系统

说明书

技术领域

本发明涉及互联网应用开发领域，特别涉及一种网页弹窗的方法及系统。

背景技术

现有技术中JQuery(—种轻量级的优秀的JavaScript(一种基于对象和事件驱动并具有相对安全性的客户端脚本语言)开发框架)的UI(用户界面)库中的弹窗插件是一款被广泛使用的插件，它基于JQuery框架被以插件形式发布。使用者需在使用该弹窗插件的页面引入所需的JavaScript文件，并在该页面实例化弹窗组件、配置弹窗样式和内容，该弹窗插件内部提供了一些对弹窗样式控制、可视性控制等的方法，也提供基于iframe(一种网页中可用的控件，用于显示外部或远程载入的页面)的外部页面调用功能，但是频繁使用外部插件中的功能性弹窗会导致重复访问服务器以加载对应的弹窗内容，而这些加载的内容中包括许多弹窗不需要的内容，因而会造成服务器带宽开支过多以及弹窗加载时间消耗过长的问题；另外，还存在页面过长弹窗后容易误碰使得页面上下浮动的问题，使得手机端等各类移动终端使用不便，用户体验度不高。

发明内容

本发明要解决的技术问题是为了克服现有技术中因频繁使用外部插件中的功能性弹窗会造成服务器带宽开支过多、弹窗加载时间消耗过长以及页面过长弹窗后容易上下浮动使用不便的缺陷，提供一种实现方式简单、服务器带宽开支少、弹窗加载时间短且用户使用方便的网页弹窗的方法及系统。

本发明是通过下述技术方案来解决上述技术问题：

本发明提供了一种网页弹窗的方法，其特点在于，包括以下步骤：

生成一html(超文本标记语言)的网页框架；

在所述网页框架中插入JQuery框架；

在所述网页框架中使用CSS(层叠样式表)设置弹窗背景的样式；

在弹窗按钮上绑定点击事件，所述点击事件包括显示弹窗及使用JQuery对标签Layer获取页面所在浏览器的页面高度；

当接收到所述弹窗按钮的点击信号时加载所述弹窗并判断所述弹窗背景中主体内容的高度是否大于所述浏览器的页面高度，若是则隐藏所述弹窗背景中的滚动条。

较佳地，所述样式包括所述弹窗背景的长、宽、高、位置和背景颜色。

较佳地，所述生成一html的网页框架，包括：

创建外层的div(层叠样式表中的定位技术)，在所述div中创建所述弹窗以及所述弹窗背景。

较佳地，在所述网页框架中使用CSS设置弹窗背景的样式，包括：

在所述网页框架中插入style(设置样式的标签)，在所述style内部设置弹窗背景的样式，设置溢出隐藏。

本发明还提供了一种网页弹窗的系统，其特点在于，包括框架生成模块、第一插入模块、样式设置模块、按钮处理模块和高度处理模块；

所述框架生成模块用于生成一html的网页框架；

所述第一插入模块用于在所述网页框架中插入JQuery框架；

所述样式设置模块用于在所述网页框架中使用CSS设置弹窗背景的样式；

所述按钮处理模块用于在弹窗按钮上绑定点击事件，所述点击事件包括显示弹窗及使用JQuery对标签Layer获取页面所在浏览器的页面高度；

所述高度处理模块用于当接收到所述弹窗按钮的点击信号时加载所述弹窗并判断所述弹窗背景中主体内容的高度是否大于所述浏览器的页面高度，若是则隐藏所述弹窗背景中的滚动条。

较佳地，所述样式包括所述弹窗背景的长、宽、高、位置和背景颜色。

较佳地，所述框架生成模块包括创建模块，所述创建模块用于创建外层的div，在所述div中创建所述弹窗以及所述弹窗背景。

较佳地，所述样式设置模块包括第二插入模块、第一设置模块和第二设置模块；

所述第二插入模块用于在所述网页框架中插入style；

所述第一设置模块用于在所述style内部设置弹窗背景的样式；

所述第二设置模块用于设置溢出隐藏。

本发明的积极进步效果在于：本发明提供的网页弹窗的方法及系统基于JQuery框架与CSS的功能模块实现了一种全新的网页弹窗的方式，本方式避免了使用现有的弹窗插件时因为加载太多不需要的功能而导致加载时间过长以及增加服务器带宽开支的问题，本发明提供的网页弹窗的实现方式简单、服务器带宽开支少、弹窗加载时间短，在弹窗背景中主体内容的高度大于浏览器的页面高度时能够隐藏弹窗背景中的滚动条，避免了页面过长弹窗存在上下浮动的问题，用户无论是在手机端还是其他移动端使用时都很方便。

附图说明