CN109002292B - 一种基于网页弹出层的弹框实现方法及系统 - Google Patents

Abstract

本发明一种基于网页弹出层的弹框实现方法及系统，所述方法包括如下步骤：步骤一，于网站项目中，添加文档对象操作库文件；步骤二，于该网站项目中添加弹出层文件；步骤三，于在该网站项目中添加脚本文件以重新封装开源网页弹出层中的弹出弹框方法，封装弹框的弹出位置信息，通过本发明，可实现一种基于网页弹出层的弹框实现方式。

Description

一种基于网页弹出层的弹框实现方法及系统

技术领域

本发明涉及网络技术领域，具体涉及一种基于网页弹出层的弹框实现方法及系统。

背景技术

网站系统中经常会使用到大量的弹框,目前有很多弹框可以选择，弹框大多数功能可以实现，比如提示性弹框、警告性弹框、输入弹框、确认弹框或者是添加界面和编辑界面弹框。例如：输入法弹框就是一种常见的弹框，它会在对当前文本框进行输入时的光标下方进行弹框显示，以帮助用户快速识别输入的内容是否正确，如图1所示，用户可以根据输入法弹框中显示的内容判断其输入的内容是否正确。

在现有技术中，当前办公自动化系统中弹框的实现大多使用的是网页弹出层(Layer弹框，以下简称网页弹出层)，网页弹出层是一个开源的弹框插件，目前参与共享的人比较多，使用的人和单位也不少，网页弹出层组件能够实现大多数的弹框需求。

目前，网页弹出层实现弹框的步骤如下：

步骤一，在网页中引用文档对象操作库文件；

步骤二，在网页中引用网页弹出层组件；

步骤三，调用网页弹出层中的提示弹框方法可以弹出提示弹框；

步骤四，调用网页弹出层中的弹出页面弹框的方法可以弹出页面弹框；

步骤五，调用网页弹出层中的询问式弹框可以弹出询问式弹框。

然而，目前利用网页弹出层组件实现弹框的技术存在如下问题：

1、网页弹出层弹出位置不能很准确的显示在界面中间位置；

2、不能根据分辨率的大小自动适应浏览器的大小来显示；

3、网页弹出层中的询问对话框框不是阻塞性的弹框，弹出后确定就会执行对应的方法，没有返回标识来控制其它的程序模块，也就是说，使用网页弹出层中的询问对话框时，语句不会阻塞在弹出询问对话框这一步，后面的代码还会继续执行；

4、没有有效解决多层级父页面弹出弹框时的显示问题，即在使用动态框架(iframe)的情况下，网页弹出层插件原生不能很好的支持在哪个框架弹出弹出层的问题，例如当当前页面出现滚动条的时候，使用网页弹出层弹出的弹框会显示在可视范围的下面，有的需要手动操作滚动条才可以看到使用网页弹出层弹出来的弹框；

5、原生的JavaScript中存在阻塞式的弹框，但是显示效果不是很好，展示样式不是很美观，用户体验也不是佳。

发明内容

为克服上述现有技术存在的不足，本发明之目的在于提供一种基于网页弹出层的弹框实现方法及系统，实现了基于网页弹出层的弹框实现方式。

为达到上述目的，本发明提供一种基于网页弹出层的弹框实现方法，包括如下步骤：

步骤一，于网站项目中，添加文档对象操作库文件；

步骤二，于该网站项目中添加网页弹出层文件；

步骤三，于在该网站项目中添加脚本文件以重新封装开源网页弹出层中的弹出弹框方法，封装弹框的弹出位置信息。

优选地，于所述脚本文件中使用对象的方式传递弹框需要显示的URL地址信息、弹框标题信息、弹框关闭后的回调函数、弹框成功弹出后的回调函数、弹框的宽度、弹框的高度、构造弹框使用的开源文件对象、弹出弹框的窗体对象信息，以根据这些信息控制弹框的弹出位置信息，并将弹框最后的索引返回。

优选地，于步骤三中，于该脚本文件中重写网页弹出层弹框的偏移量属性。

优选地，于步骤三中，所述重写网页弹出层弹框的偏移量属性具体为确定传入弹框是从哪个窗体对象弹出以及该窗体对象的高度值、传入弹出层的高度，并通过该两个数值计算弹出层偏移量中距离弹出窗体顶端的位置。

优选地，于步骤三中，对于确认弹框，于所述脚本文件中使用对象的方式传递参数信息，参数包括询问消息内容、确认后执行的回调函数、确认后执行的回调函数需要的参数信息、确认弹框使用的开源组件信息对象和其它配置信息，在封装的确认弹框最后返回标识阻止程序提交，在成功的回调函数中执行提交来达到阻塞程序执行的目的。

优选地，于步骤三中，通过该脚本文件根据分辨率大小动态控制弹框大小。

优选地，所述根据分辨率大小动态控制弹框大小是通过该脚本文件获取当前弹出层弹出的页面高度和宽度，来动态控制弹出框的高度和宽度来实现的。

为达到上述目的，本发明还提供一种基于网页弹出层的弹框实现系统，包括：

文档对象操作库文件添加单元，用于于网站项目中，添加文档对象操作库文件；

网页弹出层文件添加单元，用于于该网站项目中添加弹出层文件；

脚本文件添加单元，用于于该网站项目中添加脚本文件以重新封装开源网页弹出层中的弹出弹框方法，封装弹框的弹出位置信息。

优选地，所述脚本文件添加单元使用对象的方式传递弹框需要显示的URL地址信息、弹框标题信息、弹框关闭后的回调函数、弹框成功弹出后的回调函数、弹框的宽度、弹框的高度、构造弹框使用的开源文件对象、弹出弹框的窗体对象信息，以根据这些信息控制弹框的弹出位置信息，并将弹框最后的索引返回。

优选地，所述脚本文件添加单元于脚本文件中根据分辨率大小动态控制弹框大小。

与现有技术相比，本发明一种基于网页弹出层的弹框实现方法及系统通过在网站项目中添加文档对象操作库文件、弹出层文件以及脚本文件，并通过在需要使用弹框的页面上引用文档对象操作库文件、网页弹出层文件，实现了一种基于网页弹出层的弹框技术。

附图说明

图1为现有技术一种弹框显示示意图；

图2为本发明一种基于网页弹出层的弹框实现方法的步骤流程图；

图3为本发明一种基于网页弹出层的弹框实现系统的系统架构图。

具体实施方式

以下通过特定的具体实例并结合附图说明本发明的实施方式，本领域技术人员可由本说明书所揭示的内容轻易地了解本发明的其它优点与功效。本发明亦可通过其它不同的具体实例加以施行或应用，本说明书中的各项细节亦可基于不同观点与应用，在不背离本发明的精神下进行各种修饰与变更。

图2为本发明一种基于网页弹出层的弹框实现方法的步骤流程图。如图2所示，本发明一种基于网页弹出层的弹框实现方法，包括如下步骤：

步骤201，添加文档对象操作库文件。这里的文档对象操作库文件为一种前端脚本库文件，例如JQuery库文件，其可以方便操作页面的文档对象模型以及封装自己的插件或者制作一些动画等内容。也就是说，于步骤201中，当开发一动态网站项目时，首先在动态网站项目中添加文档对象操作库文件。

步骤202,添加网页弹出层文件。也就是说，在该网站项目中添加网页弹出层文件，在本步骤中，所述网页弹出层文件为开源的网页弹出层文件。

步骤203，于该网站项目中添加脚本文件以重新封装开源网页弹出层中的弹出弹框方法，封装弹框的弹出位置信息。在本发明具体实施例中，于所述脚本文件中使用对象的方式传递弹框需要显示的URL地址信息、弹框标题信息、弹框关闭后的回调函数、弹框成功弹出后的回调函数、弹框的宽度、弹框的高度、构造弹框使用的开源文件对象、弹出弹框的窗体对象信息，以根据这些信息控制弹框的弹出位置信息，并将弹框最后的索引返回，方便系统调用弹框的关闭方法等操作。

具体地说，为了解决现有技术中对于弹框的弹出位置不能很准确的显示在页面中间，于步骤203中，于该脚本文件中重写网页弹出层弹框的偏移量属性，即在网页弹出层弹框的基础上封装一个方法确定网页弹出层的偏移量属性，例如传入弹框是从哪个窗体对象弹出以及该窗体对象的高度值、传入弹出层的高度，并通过该两个数值计算弹出层偏移量中距离弹出窗体顶端的位置，一般来说，由于水平位置在网页弹出层中控制得较好，这里只要计算距离弹出窗体顶端的位置即可。

具体地说，假如需要弹框从当前window对象弹出，可以通过文档对象操作库得出父窗体对象的高度值以及弹出层的高度值，然后通过该两个值即可得出距离父窗体顶端的偏移量，这样当打开网页时，弹框就可以准确地显示在页面中间。

这里需说明的是，本发明通过重写弹出层弹框传入从哪个窗体对象弹出也同时解决了多层级父子页面弹出层的显示问题，通过传入父窗口网页弹出层可以在父页面范围内弹出弹出层，就不会局限在子页面范围内，通过在子页面的弹出层方法中传入网页弹出层对象就可以从子页面弹出弹出层，并仅仅只能在子页面内显示。

可见，本发明之基于网页弹出层的弹框实现方法通过添加脚本文件重新封装开源网页弹出层中的弹出弹框方法，通过使用对象的方式传递弹框需要显示的各种信息，根据这些信息控制弹框的弹出位置信息，并将弹框最后的索引返回，方便系统调用弹框的关闭方法，即可解决现有技术中弹框的存在的问题。

优选地，在本发明具体实施例中，询问式弹框(即确认弹框)为独立控制，询问式弹框的弹出位置控制如前所述。询问式弹框也是一种弹框，但是其用来实现的功能与一般弹框有所不同，询问式弹框主要是用来询问操作者的意图，然后根据操作者的选择来调用不同的回调函数来处理操作，回调函数是在调用询问式弹框的时候作为参数传入的。

因此，对于询问式弹框，于所述脚本文件中使用对象的方式传递参数信息，参数主要包括询问消息内容、确认后执行的回调函数、确认后执行的回调函数需要的参数信息、确认弹框使用的开源组件信息对象和其它配置信息等，在封装的确认弹框最后返回标识阻止程序提交，在成功的回调函数中执行提交来达到阻塞程序执行的目的。

具体地，于本发明中，询问弹出层实现阻塞(模拟阻塞的效果)，封装网页弹出层传入确认后需要调用的函数和需要用到的一些参数，并返回是点击确认还是点击了取消的标识，返回标识如果是否则不执行任何操作，返回标识符如果是真的则会继续执行其它操作。也就是说，本发明中的询问弹出层中采用返回否的方式阻止表单提交,然后再询问框的回调函数中使用手动调用表单提交的方式来实现数据提交来实现阻塞。

优选地，于步骤203中，通过该脚本文件根据分辨率大小动态控制弹框大小。具体地，所述通过该脚本文件根据分辨率大小动态控制弹框大小是通过JavaScript脚本方法来获取当前弹出层弹出的页面高度和宽度，来动态控制弹出框的高度和宽度来实现的。

也就是说，本发明中的网页弹出层是在现有的开源网页弹出层的基础上实现的，现有开源网页弹出层实现了各种形式的弹框方式，但是位置和大小控制不是很好，也不能很好的支持多层父子页面的情况，通过本发明中的网页弹出层则可以解决该些问题。

图3为本发明一种基于网页弹出层的弹框实现系统的系统架构图。如图3所示，本发明一种基于网页弹出层的弹框实现系统，包括：

文档对象操作库文件添加单元301，用于添加文档对象操作库文件。这里的文档对象操作库文件为一种前端脚本库文件，例如JQuery库文件，其可以方便操作页面的文档对象模型以及封装自己的插件或者制作一些动画等内容。也就是说，当开发一动态网站项目时，文档对象操作库文件添加单元301首先在动态网站项目中添加文档对象操作库文件。

网页弹出层文件添加单元302,添加网页弹出层文件。也就是说，在该网站项目中添加弹出层文件，所述网页弹出层文件为开源的网页弹出层文件。

脚本文件添加单元303，用于于该网站项目中添加脚本文件以重新封装开源网页弹出层中的弹出弹框方法，封装弹框的弹出位置信息。在本发明具体实施例中，脚本文件添加单元303添加脚本文件，并于所述脚本文件中使用对象的方式传递弹框需要显示的URL地址信息、弹框标题信息、弹框关闭后的回调函数、弹框成功弹出后的回调函数、弹框的宽度、弹框的高度、构造弹框使用的开源文件对象、弹出弹框的窗体对象信息，以根据这些信息控制弹框的弹出位置信息，并将弹框最后的索引返回，方便系统调用弹框的关闭方法等操作。

具体地说，为了解决现有技术中对于弹框的弹出位置不能很准确的显示在页面中间，脚本文件添加单元303于该弹出层文件中重写网页弹出层弹框的偏移量属性，即在网页弹出层弹框的基础上封装一个方法确定网页弹出层的偏移量属性，例如传入弹框是从哪个窗体对象弹出以及该窗体对象的高度值，传入弹出层的高度，并通过该两个数值计算弹出层偏移量中距离弹出窗体顶端的位置，一般来说，由于水平位置在网页弹出层中控制得较好，这里只要计算距离弹出窗体顶端的位置即可。

具体地说，假如需要弹框从当前window对象弹出，可以通过文档对象操作库得出父窗体对象的高度值以及弹出层的高度值，然后通过该两个值即可得出距离父窗体顶端的偏移量，这样当打开网页时，弹框就可以准确地显示在页面中间。

这里需说明的是，本发明通过重写弹出层弹框传入从哪个窗体对象弹出也解决了多层级父子页面弹出层的显示问题，通过传入父窗口网页弹出层可以在父页面范围内弹出弹出层，就不会局限在子页面范围内，通过在子页面的弹出层方法中传入网页弹出层对象就可以从子页面弹出弹出层，并仅仅只能在子页面内显示。

优选地，在本发明具体实施例中，询问式弹框为独立控制，询问式弹框的弹出位置控制如前所述。询问式弹框也是一种弹框，但是其用来实现的功能与一般弹框有所不同，询问式弹框主要是用来询问操作者的意图，然后根据操作者的选择来调用不同的回调函数来处理操作，回调函数是在调用询问式弹框的时候作为参数传入的。

因此，对于询问式弹框，于所述脚本文件中使用对象的方式传递参数信息，参数主要包括询问消息内容、确认后执行的回调函数、确认后执行的回调函数需要的参数信息、确认弹框使用的开源组件信息对象和其它配置信息等，在封装的确认弹框最后返回标识阻止程序提交，在成功的回调函数中执行提交来达到阻塞程序执行的目的。

具体地，于本发明中，询问弹出层实现阻塞(模拟阻塞的效果)，封装网页弹出层传入确认后需要调用的函数和需要用到的一些参数，并返回是点击确认还是点击了取消的标识，返回标识如果是否就不执行任何操作，返回标识符如果是真的会就会继续执行其它操作。也就是说，本发明中的询问弹出层中采用返回否的方式阻止表单提交,然后再询问框的回调函数中使用手动调用表单提交的方式来实现数据提交来实现阻塞。

优选地，于本发明中，脚本文件添加单元303还于脚本文件中根据分辨率大小动态控制弹框大小。具体地，弹框大小动态根据分辨率大小来控制是通过JavaScript脚本方法来获取当前弹出层弹出的页面高度和宽度，来动态控制弹出框的高度和宽度来实现的。

综上所述，本发明一种基于网页弹出层的弹框实现方法及系统通过在网站项目中添加文档对象操作库文件、弹出层文件以及脚本文件，并通过在需要使用弹框的页面上引用文档对象操作库文件、网页弹出层文件，实现了基于网页弹出层的弹框技术。

与现有技术相比，本发明具有如下优点：

1.将弹框的位置控制和逻辑控制以插件的形式封装，方便调用。

2.可以在其它的WEB页面中使用，节省开发时间。

3.经过多次使用和测试后错误比较少，减少开发人员调试的时间。

4.封装常见的JavaScript弹框API，减少了查询API的时间。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (5)

1.一种基于网页弹出层的弹框实现方法，包括如下步骤：

步骤一，于网站项目中，创建文档对象操作库文件；

步骤二，于所述网站项目中创建网页弹出层文件；

步骤三，于所述网站项目中创建脚本文件，并于所述脚本文件中重新封装开源网页弹出层中的弹出弹框方法，封装弹框的弹出位置信息；

所述弹出弹框方法包括：根据生成的网页弹出层偏移量属性，结合所述脚本文件并根据分辨率大或小动态控制弹框大或小；所述根据分辨率大或小动态控制弹框大或小是通过所述脚本文件获取当前弹出层弹出的页面高度和宽度，动态控制弹出框的高度和宽度；

于步骤三中还包括步骤：于所述脚本文件中重写网页弹出层弹框的偏移量属性；所述重写网页弹出层弹框的偏移量属性具体为确定传入弹框是从哪个窗体对象弹出以及该窗体对象的高度值、传入弹出层的高度，并通过这两个数值计算弹出层偏移量中距离弹出窗体顶端的位置。

2.如权利要求1所述的一种基于网页弹出层的弹框实现方法，其特征在于：于所述脚本文件中使用对象的方式传递弹框需要显示的URL地址信息、弹框标题信息、弹框关闭后的回调函数、弹框成功弹出后的回调函数、弹框的宽度、弹框的高度、构造弹框使用的开源文件对象、弹出弹框的窗体对象信息，以根据这些信息控制弹框的弹出位置信息，并将弹框最后的索引返回。

3.如权利要求1所述的一种基于网页弹出层的弹框实现方法，其特征在于：于步骤三中，对于确认弹框，于所述脚本文件中使用对象的方式传递参数信息，参数包括询问消息内容、确认后执行的回调函数、确认后执行的回调函数需要的参数信息、确认弹框使用的开源组件信息对象和其它配置信息，在封装的确认弹框最后返回标识阻止程序提交，在成功的回调函数中执行提交来达到阻塞程序执行的目的。

4.一种基于网页弹出层的弹框实现系统，包括：

文档对象操作库文件创建单元，用于于网站项目中，创建文档对象操作库文件；

网页弹出层文件创建单元，用于于该网站项目中创建弹出层文件；

脚本文件创建单元，用于于所述网站项目中创建脚本文件以重新封装开源网页弹出层中的弹出弹框方法，封装弹框的弹出位置信息；

所述系统还包括动态控制模块，用于根据生成的网页弹出层偏移量属性，结合所述脚本文件并根据分辨率大或小动态控制弹框大或小；所述根据分辨率大或小动态控制弹框大或小是通过所述脚本文件获取当前弹出层弹出的页面高度和宽度，动态控制弹出框的高度和宽度；

重写模块用于所述脚本文件中重写网页弹出层弹框的偏移量属性；所述重写网页弹出层弹框的偏移量属性具体为确定传入弹框是从哪个窗体对象弹出以及该窗体对象的高度值、传入弹出层的高度，并通过这两个数值计算弹出层偏移量中距离弹出窗体顶端的位置。

5.如权利要求4所述的一种基于网页弹出层的弹框实现系统，其特征在于：所述脚本文件创建单元使用对象的方式传递弹框需要显示的URL地址信息、弹框标题信息、弹框关闭后的回调函数、弹框成功弹出后的回调函数、弹框的宽度、弹框的高度、构造弹框使用的开源文件对象、弹出弹框的窗体对象信息，以根据这些信息控制弹框的弹出位置信息，并将弹框最后的索引返回。

Images