CN107908793A - The method and system of web page popup window - Google Patents
The method and system of web page popup window Download PDFInfo
- Publication number
- CN107908793A CN107908793A CN201711328666.XA CN201711328666A CN107908793A CN 107908793 A CN107908793 A CN 107908793A CN 201711328666 A CN201711328666 A CN 201711328666A CN 107908793 A CN107908793 A CN 107908793A
- Authority
- CN
- China
- Prior art keywords
- pop
- web page
- background
- height
- module
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses the method and system of web page popup window, the method for web page popup window comprises the following steps：Generate the web page frame of a html；JQuery frames are inserted into web page frame；The pattern of pop-up background is set in web page frame using CSS；Click event is bound on pop-up button, the page height of browser where event of clicking on includes display pop-up and obtains the page to label Layer using JQuery；Pop-up is loaded when receiving the click signal of pop-up button and judges whether the height of body matter in pop-up background is more than the page height of browser, if then hiding the scroll bar in pop-up background.The implementation of web page popup window provided by the invention is simple, server bandwidth is paid wages less, the pop-up load time is short, the scroll bar in pop-up background can be hidden when the height of body matter is more than the page height of browser in pop-up background, avoid the long pop-up of the page and there is the problem of fluctuating, user is easy to use.
Description
Technical field
The present invention relates to field of Internet application and development, more particularly to a kind of method and system of web page popup window.
Background technology
((one kind is based on object and event-driven to the outstanding JavaScript of-kind of lightweight to JQuery in the prior art
And with relative safety client-side scripting language) Development Framework) and UI (user interface) storehouse in pop-up plug-in unit be a
The plug-in unit being widely used, it is issued based on JQuery frames with card format.User need to use the pop-up plug-in unit
The page introduces required JavaScript file, and in the page instance pop-up component, configuration pop-up pattern and content, the bullet
Some methods to the control of pop-up pattern, visual control etc. are provided inside window plug-in unit, also provides and is based on a kind of iframe (nets
Available control in page, for showing the page that is exterior or being remotely loaded into) exterior page calling function, but frequently outside
Feature pop-up in portion's plug-in unit can cause repeated accesses server to load corresponding pop-up content, and the content of these loadings
Include the unwanted content of many pop-ups, thus can cause that server bandwidth spending is excessive and the pop-up load time consumed
The problem of long；In addition, also there are easily touched by mistake so that the problem of page fluctuates after the long pop-up of the page so that mobile phone terminal etc.
All kinds of mobile terminals are inconvenient for use, and user experience is not high.
The content of the invention
The technical problem to be solved in the present invention is in order to overcome in the prior art because frequently use external plug-in in function
Property pop-up can cause server bandwidth spending is excessive, after the consumption long pop-up of the long and page of pop-up load time easily up and down
Float the defects of inconvenient for use, there is provided a kind of implementation is simple, server bandwidth is paid wages less, the pop-up load time is short and user
The method and system of web page popup window easy to use.
The present invention is to solve above-mentioned technical problem by following technical proposals：
The present invention provides a kind of method of web page popup window, its feature is, comprises the following steps：
Generate the web page frame of a html (hypertext markup language)；
JQuery frames are inserted into the web page frame；
The pattern of pop-up background is set in the web page frame using CSS (cascading style sheets)；
Click event is bound on pop-up button, the click event includes display pop-up and using JQuery to label
The page height of browser where Layer obtains the page；
The pop-up is loaded when receiving the click signal of the pop-up button and judges main body in the pop-up background
Whether the height of content is more than the page height of the browser, if then hiding the scroll bar in the pop-up background.
It is preferred that the pattern includes length, position and the background color of the pop-up background.
It is preferred that the web page frame of one html of the generation, including：
The div (location technology in cascading style sheets) of outer layer is created, the pop-up and described is created in the div
Pop-up background.
It is preferred that the pattern of pop-up background is set in the web page frame using CSS, including：
Style (label that pattern is set) is inserted into the web page frame, pop-up background is set inside the style
Pattern, set overflow hide.
Present invention also offers a kind of system of web page popup window, its feature is, including frame generation module, the first insertion
Module, pattern setup module, button processing module and height processing module；
The frame generation module is used for the web page frame for generating a html；
The first insertion module is used to be inserted into JQuery frames in the web page frame；
The pattern setup module is used for the pattern for setting pop-up background using CSS in the web page frame；
The button processing module is used to bind click event on pop-up button, and the click event includes display pop-up
And the page height of page place browser is obtained to label Layer using JQuery；
The height processing module is used to load the pop-up when receiving the click signal of the pop-up button and sentence
Whether the height of body matter is more than the page height of the browser in the pop-up background of breaking, if then hiding the pop-up
Scroll bar in background.
It is preferred that the pattern includes length, position and the background color of the pop-up background.
It is preferred that the frame generation module includes creation module, the creation module is used for the div for creating outer layer,
The pop-up and the pop-up background are created in the div.
It is preferred that the pattern setup module includes the second insertion module, the first setup module and the second setup module；
The second insertion module is used to be inserted into style in the web page frame；
First setup module is used for inside the style pattern for setting pop-up background；
Second setup module, which is used to set to overflow, to be hidden.
The positive effect of the present invention is：The method and system of web page popup window provided by the invention are based on JQuery frames
A kind of mode of brand-new web page popup window of the Implement of Function Module of frame and CSS, the manner is avoided is inserted using existing pop-up
The problem of causing the load time long because of the too many unwanted function of loading during part and increase server bandwidth spending, this
The implementation for the web page popup window that invention provides is simple, server bandwidth is paid wages less, the pop-up load time is short, in pop-up background
The height of body matter can hide the scroll bar in pop-up background when being more than the page height of browser, it is long to avoid the page
There is the problem of fluctuating in pop-up, user is either very convenient when mobile phone terminal or other mobile terminals use.
Brief description of the drawings
Fig. 1 is the flow chart of the method for the web page popup window of the embodiment of the present invention 1.
Fig. 2 is the module diagram of the system of the web page popup window of the embodiment of the present invention 2.
Embodiment
The present invention is further illustrated below by the mode of embodiment, but does not therefore limit the present invention to the reality
Apply among a scope.
Embodiment 1
As shown in Figure 1, present embodiments providing a kind of method of web page popup window, comprise the following steps：
Step S101, the web page frame of a html is generated, the div of outer layer is specially created, in the div described in establishment
Pop-up and the pop-up background；
Step S102, JQuery frames are inserted into the web page frame；
Step S103, style is inserted into the web page frame, the pattern of pop-up background is set inside the style,
Set to overflow and hide, the pattern includes length, position and the background color of the pop-up background；
Step S104, click event is bound on pop-up button, the click event includes display pop-up and use
The page height of browser where JQuery obtains the page to label Layer；
Step S105, the pop-up is loaded when receiving the click signal of the pop-up button and judges the pop-up back of the body
Whether the height of body matter is more than the page height of the browser in scape, if then hiding the rolling in the pop-up background
Bar.
Code based on the present embodiment is realized and may comprise steps of：
1st, a html is established, including creates an outermost div first, pop-up and pop-up are then created in div
Shadow layer.
2nd, a CSS is established, including hides outermost div, to patterns such as page model addition length and width height.
3rd, a JavaScript is established, including button is bound and clicks on display event, the outermost div of button is clicked on and shows
Show and is obtained by page height and is overflowed by body (web page body) addition class (attribute) at the same time and hide.
The method of web page popup window provided in this embodiment includes generation instantiation pop-up, manages pop-up and loading pop-up page
Face.Wherein managing pop-up includes addition pop-up pattern CSS；Pop-up visuality is controlled.Generation pop-up further includes initialization
The parameter management during component, corresponding pop-up html structures are generated by parameter.
Based on the method for web page popup window provided in this embodiment, further, the exterior individual page being loaded is called, is obtained
Obtain pop-up example.Specially：After exterior content pages are loaded, equally (used using script in this exterior content page
In definition client script) JS (a kind of file type of the scripting language) file for introducing pop-up component is marked, obtain bullet
Window example.When can thus make the page long, the page is not touched and is slided with user after pop-up window, make user experience
It is bad, and due to being the pop-up individually write in the page, so server bandwidth spending will not be increased.
Implement of Function Module of the method for web page popup window provided in this embodiment based on JQuery frames and CSS is a kind of complete
The mode of new web page popup window, the manner avoid using during existing pop-up plug-in unit because the too many unwanted function of loading and
The problem of causing the load time long and increasing server bandwidth spending, the implementation letter of web page popup window provided by the invention
Single, server bandwidth is paid wages less, the pop-up load time is short, and the height of body matter is more than the page of browser in pop-up background
The scroll bar in pop-up background can be hidden during height, the long pop-up of the page is avoided and there is the problem of fluctuating, Yong Huwu
By be mobile phone terminal or other mobile terminals use when it is all very convenient.
Embodiment 2
As shown in Fig. 2, a kind of system of web page popup window is present embodiments provided, including frame generation module 1, first is inserted into
Module 2, pattern setup module 3, button processing module 4 and height processing module 5；
The frame generation module 1 is used for the web page frame for generating a html；
The first insertion module 2 is used to be inserted into JQuery frames in the web page frame；
The pattern setup module 3 is used for the pattern for setting pop-up background using CSS in the web page frame, the sample
Formula includes length, position and the background color of the pop-up background；
The button processing module 4 is used to bind click event on pop-up button, and the click event includes display bullet
Window and the page height for obtaining page place browser to label Layer using JQuery；
The height processing module 5 is used to load the pop-up when receiving the click signal of the pop-up button and sentence
Whether the height of body matter is more than the page height of the browser in the pop-up background of breaking, if then hiding the pop-up
Scroll bar in background.
In the present embodiment, the frame generation module 1 includes creation module 101, and the creation module 101 is used to create outer
The div of layer, creates the pop-up and the pop-up background in the div.
In the present embodiment, the pattern setup module 3 includes the second insertion module 301, the first setup module 302 and second
Setup module 303；The second insertion module 301 is used to be inserted into style in the web page frame；First setup module
302 are used for the pattern of the setting pop-up background inside the style；Second setup module 303, which is used to set to overflow, to be hidden.
Implement of Function Module of the method for web page popup window provided in this embodiment based on JQuery frames and CSS is a kind of complete
The mode of new web page popup window, the manner avoid using during existing pop-up plug-in unit because the too many unwanted function of loading and
The problem of causing the load time long and increasing server bandwidth spending, the implementation letter of web page popup window provided by the invention
Single, server bandwidth is paid wages less, the pop-up load time is short, and the height of body matter is more than the page of browser in pop-up background
The scroll bar in pop-up background can be hidden during height, the long pop-up of the page is avoided and there is the problem of fluctuating, Yong Huwu
By be mobile phone terminal or other mobile terminals use when it is all very convenient.
Although the embodiment of the present invention is the foregoing described, it will be appreciated by those of skill in the art that this is only
For example, protection scope of the present invention is to be defined by the appended claims.Those skilled in the art without departing substantially from
On the premise of the principle of the present invention and essence, various changes or modifications can be made to these embodiments, but these changes and
Modification each falls within protection scope of the present invention.
Claims (8)
- A kind of 1. method of web page popup window, it is characterised in that comprise the following steps：Generate the web page frame of a html；JQuery frames are inserted into the web page frame；The pattern of pop-up background is set in the web page frame using CSS；Click event is bound on pop-up button, the click event includes display pop-up and using JQuery to label Layer The page height of browser where obtaining the page；The pop-up is loaded when receiving the click signal of the pop-up button and judges body matter in the pop-up background Height whether be more than the browser page height, if then hide the pop-up background in scroll bar.
- 2. the method for web page popup window as claimed in claim 1, it is characterised in that the pattern includes the pop-up background Length, position and background color.
- 3. the method for web page popup window as claimed in claim 1, it is characterised in that the web page frame of one html of the generation, bag Include：The div of outer layer is created, the pop-up and the pop-up background are created in the div.
- 4. the method for web page popup window as claimed in claim 3, it is characterised in that set in the web page frame using CSS The pattern of pop-up background, including：Style is inserted into the web page frame, the pattern of pop-up background is set inside the style, sets to overflow and hides.
- 5. a kind of system of web page popup window, it is characterised in that mould is set including frame generation module, the first insertion module, pattern Block, button processing module and height processing module；The frame generation module is used for the web page frame for generating a html；The first insertion module is used to be inserted into JQuery frames in the web page frame；The pattern setup module is used for the pattern for setting pop-up background using CSS in the web page frame；The button processing module is used to bind click event on pop-up button, and the click event includes display pop-up and makes The page height of browser where obtaining the page to label Layer with JQuery；The height processing module is used to load the pop-up when receiving the click signal of the pop-up button and judge institute Whether the height for stating body matter in pop-up background is more than the page height of the browser, if then hiding the pop-up background In scroll bar.
- 6. the system of web page popup window as claimed in claim 5, it is characterised in that the pattern includes the pop-up background Length, position and background color.
- 7. the system of web page popup window as claimed in claim 5, it is characterised in that the frame generation module includes creating mould Block, the creation module are used for the div for creating outer layer, the pop-up and the pop-up background are created in the div.
- 8. the system of web page popup window as claimed in claim 7, it is characterised in that the pattern setup module includes the second insertion Module, the first setup module and the second setup module；The second insertion module is used to be inserted into style in the web page frame；First setup module is used for inside the style pattern for setting pop-up background；Second setup module, which is used to set to overflow, to be hidden.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711328666.XA CN107908793A (en) | 2017-12-13 | 2017-12-13 | The method and system of web page popup window |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711328666.XA CN107908793A (en) | 2017-12-13 | 2017-12-13 | The method and system of web page popup window |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107908793A true CN107908793A (en) | 2018-04-13 |
Family
ID=61865322
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711328666.XA Pending CN107908793A (en) | 2017-12-13 | 2017-12-13 | The method and system of web page popup window |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107908793A (en) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109002292A (en) * | 2018-06-11 | 2018-12-14 | 广州环通信息技术有限公司 | A kind of bullet frame realization method and system based on webpage ejection layer |
| CN109063202A (en) * | 2018-09-13 | 2018-12-21 | 北京三快在线科技有限公司 | The method, apparatus and computer equipment of pop-up are realized in mixed interface application |
| CN109375975A (en) * | 2018-09-30 | 2019-02-22 | 新华三大数据技术有限公司 | Mode frame construction method, apparatus, electronic equipment, computer readable storage medium |
| CN109445786A (en) * | 2018-10-19 | 2019-03-08 | 成都安恒信息技术有限公司 | A method of the general pop-up page is realized based on JavaScript |
| CN110955482A (en) * | 2019-11-27 | 2020-04-03 | 维沃移动通信有限公司 | Popup display method, apparatus, electronic device and medium |
| CN111596853A (en) * | 2020-04-29 | 2020-08-28 | 五八有限公司 | Method and device for realizing rolling indicator, electronic equipment and storage medium |
| CN111736833A (en) * | 2020-06-24 | 2020-10-02 | 携程计算机技术（上海）有限公司 | Method and system for generating popup component, electronic device and storage medium |
| CN113190776A (en) * | 2021-05-11 | 2021-07-30 | 上海哔哩哔哩科技有限公司 | Popup window display method and system |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101777069A (en) * | 2010-01-04 | 2010-07-14 | 山东浪潮齐鲁软件产业股份有限公司 | Method for building list element for supporting large data volume high performance browser |
| CN102194003A (en) * | 2011-05-26 | 2011-09-21 | 重庆猪八戒网络有限公司 | Web page popup window method and device |
| CN103235737A (en) * | 2013-04-08 | 2013-08-07 | 厦门市美亚柏科信息股份有限公司 | Frameset-based browser dialog box simulation method |
| CN106168978A (en) * | 2016-07-25 | 2016-11-30 | 腾讯科技（深圳）有限公司 | The treating method and apparatus of pop-up in a kind of webpage |
| CN107391115A (en) * | 2017-06-28 | 2017-11-24 | 武汉斗鱼网络科技有限公司 | A kind of method, apparatus and computer equipment for realizing pop-up alternative events |
-
2017
- 2017-12-13 CN CN201711328666.XA patent/CN107908793A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101777069A (en) * | 2010-01-04 | 2010-07-14 | 山东浪潮齐鲁软件产业股份有限公司 | Method for building list element for supporting large data volume high performance browser |
| CN102194003A (en) * | 2011-05-26 | 2011-09-21 | 重庆猪八戒网络有限公司 | Web page popup window method and device |
| CN103235737A (en) * | 2013-04-08 | 2013-08-07 | 厦门市美亚柏科信息股份有限公司 | Frameset-based browser dialog box simulation method |
| CN106168978A (en) * | 2016-07-25 | 2016-11-30 | 腾讯科技（深圳）有限公司 | The treating method and apparatus of pop-up in a kind of webpage |
| CN107391115A (en) * | 2017-06-28 | 2017-11-24 | 武汉斗鱼网络科技有限公司 | A kind of method, apparatus and computer equipment for realizing pop-up alternative events |
Non-Patent Citations (1)
| Title |
|---|
| 无: "《弹窗Modal实现和有滚动条偏移解决方法》", 《【弹窗MODAL实现和有滚动条偏移解决方法-前端开发博客】HTTP://M.CAIBAOJIAN.COM/MODAL-RESOLVE-SCROLLBAR.HTML》 * |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109002292B (en) * | 2018-06-11 | 2022-02-11 | 广州环通信息技术有限公司 | Method and system for realizing pop-up frame based on webpage pop-up layer |
| CN109002292A (en) * | 2018-06-11 | 2018-12-14 | 广州环通信息技术有限公司 | A kind of bullet frame realization method and system based on webpage ejection layer |
| CN109063202B (en) * | 2018-09-13 | 2022-01-25 | 北京三快在线科技有限公司 | Method and device for realizing popup in mixed interface application and computer equipment |
| CN109063202A (en) * | 2018-09-13 | 2018-12-21 | 北京三快在线科技有限公司 | The method, apparatus and computer equipment of pop-up are realized in mixed interface application |
| CN109375975A (en) * | 2018-09-30 | 2019-02-22 | 新华三大数据技术有限公司 | Mode frame construction method, apparatus, electronic equipment, computer readable storage medium |
| CN109445786B (en) * | 2018-10-19 | 2022-02-11 | 成都安恒信息技术有限公司 | Method for realizing universal popup page based on JavaScript |
| CN109445786A (en) * | 2018-10-19 | 2019-03-08 | 成都安恒信息技术有限公司 | A method of the general pop-up page is realized based on JavaScript |
| CN110955482A (en) * | 2019-11-27 | 2020-04-03 | 维沃移动通信有限公司 | Popup display method, apparatus, electronic device and medium |
| CN110955482B (en) * | 2019-11-27 | 2023-12-05 | 维沃移动通信有限公司 | Popup window display method and device, electronic equipment and medium |
| CN111596853A (en) * | 2020-04-29 | 2020-08-28 | 五八有限公司 | Method and device for realizing rolling indicator, electronic equipment and storage medium |
| CN111736833A (en) * | 2020-06-24 | 2020-10-02 | 携程计算机技术（上海）有限公司 | Method and system for generating popup component, electronic device and storage medium |
| CN111736833B (en) * | 2020-06-24 | 2024-05-03 | 携程计算机技术（上海）有限公司 | Method, system, electronic device and storage medium for generating popup assembly |
| CN113190776A (en) * | 2021-05-11 | 2021-07-30 | 上海哔哩哔哩科技有限公司 | Popup window display method and system |
| CN113190776B (en) * | 2021-05-11 | 2022-11-01 | 上海哔哩哔哩科技有限公司 | Popup window display method and system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107908793A (en) | The method and system of web page popup window | |
| US10643023B2 (en) | Programmatic native rendering of structured content | |
| US8732588B2 (en) | Method and apparatus for remotely displaying screen files and efficiently handling remote operator input | |
| CN107992301A (en) | User interface implementation method, client and storage medium | |
| CN111639287A (en) | Page processing method and device, terminal equipment and readable storage medium | |
| US8407668B2 (en) | Model based spreadsheet scripting language | |
| CN103425794B (en) | Web preview method and apparatus based on double WebView | |
| CN102799372B (en) | A kind of method for uploading of pictorial information and upload device | |
| CN104298721B (en) | A kind of arbitrarily a object split screen layout edit methods of the online courseware development based on Web | |
| CN106874519A (en) | Webpage representation method and apparatus | |
| DE202014010943U1 (en) | Switch to and from native web applications | |
| US10417317B2 (en) | Web page profiler | |
| CN103544024A (en) | Method and system for generating browser page and terminal device | |
| CN113382083B (en) | Webpage screenshot method and device | |
| CN105786207A (en) | Information input method and device | |
| CN106919406A (en) | A kind of desktop application component issue, update method and device | |
| CN109545333A (en) | The method and device that Dicom image shows, handles | |
| CN111124564A (en) | Method and device for displaying user interface | |
| US8884970B2 (en) | Aligning script animations with display refresh | |
| US20170031889A1 (en) | Creating a communication editable in a browser independent of platform and operating system | |
| CN113688341A (en) | Dynamic picture decomposition method and device, electronic equipment and readable storage medium | |
| CN107506597A (en) | Medical files acquisition methods, terminal and server | |
| US20100318889A1 (en) | Automatic Insertion of Data from Web Forms into Documents | |
| CN106383710A (en) | Webpage embedding method | |
| CN112486482A (en) | Page display method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180413 |