CN106168978B - Method and device for processing popup in webpage - Google Patents
Method and device for processing popup in webpage Download PDFInfo
- Publication number
- CN106168978B CN106168978B CN201610592175.5A CN201610592175A CN106168978B CN 106168978 B CN106168978 B CN 106168978B CN 201610592175 A CN201610592175 A CN 201610592175A CN 106168978 B CN106168978 B CN 106168978B
- Authority
- CN
- China
- Prior art keywords
- popup
- layer element
- style
- animation
- mask layer
- 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.)
- Active
Links
Images
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
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
Abstract
The invention discloses a method and a device for processing a popup in a webpage, which are used for simultaneously realizing horizontal and vertical centering and animation effects of the popup and are free from JS dynamic calculation. The embodiment of the invention provides a method for processing a popup in a webpage, which comprises the following steps: acquiring a mask layer element and a popup layer element in a hypertext markup language (HTML) webpage structure, and configuring a hierarchical relationship between the mask layer element and the popup layer element as a parent-child element; configuring a preset layout style in a first Cascading Style Sheet (CSS) code associated with the mask layer element; and configuring a preset animation style in a second CSS code associated with the popup layer element.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a method and a device for processing a popup window in a webpage.
Background
When designing a HyperText Markup Language (HTML) web page, a script designed by HTML needs to be edited separately with a Cascading Style Sheets (CSSs) code specially designed for the aesthetic design of HTML. The CSS, as a computer markup language, is responsible for rendering web content in standard web design, and can precisely control the position layout of each display object in a web page, and support almost all fonts, font sizes, and styles.
In the current HTML structure, a popup can be displayed above the main content of a web page, the popup can be suspended above the main content, and the popup can be set to be in a horizontal-vertical centering mode in CSS code associated with the HTML page. There are two main solutions in the current CSS positioning to horizontal vertical centering, the first solution is implemented by negative margin and the second solution is implemented by transform of CSS 3. In the first scheme, the CSS horizontal-vertical centering style requires the calculation of the height and width of the popup, and since the width and height of the popup are automatically opened, JavaScript (JS for short) is required to dynamically calculate the width and height of the popup, which is relatively expensive in processing resources. In the second scheme, although the problem of JS dynamic computation is solved by using the transform of CSS3, if a popup needs to be animated using the transform, a horizontal-vertical centering pattern of the popup cannot be realized, and if a popup needs to be animated using a horizontal-vertical centering pattern, an animation effect of the popup cannot be realized. Therefore, in the transform solution of CSS3, the current pop-window can only be selected from two when dealing with the horizontal and vertical centering and animation effect, and the horizontal and vertical centering and animation effect of the pop-window cannot be achieved at the same time.
Disclosure of Invention
The embodiment of the invention provides a method and a device for processing a popup in a webpage, which are used for simultaneously realizing horizontal and vertical centering and animation effects of the popup and are free from JS dynamic calculation.
In order to solve the above technical problems, embodiments of the present invention provide the following technical solutions:
in a first aspect, an embodiment of the present invention provides a method for processing a popup in a web page, including:
acquiring a mask layer element and a popup layer element in a hypertext markup language (HTML) webpage structure, and configuring a hierarchical relationship between the mask layer element and the popup layer element as a parent-child element;
configuring a preset layout style in a first Cascading Style Sheet (CSS) code associated with the mask layer element;
and configuring a preset animation style in a second CSS code associated with the popup layer element.
In a second aspect, an embodiment of the present invention further provides a device for processing a popup window in a web page, including:
the popup layer nesting module is used for acquiring a mask layer element and a popup layer element in a hypertext markup language (HTML) webpage structure and configuring the hierarchical relationship between the mask layer element and the popup layer element as a parent-child element;
the layout configuration module is used for configuring a preset layout style in a first Cascading Style Sheet (CSS) code associated with the mask layer element;
and the animation configuration module is used for configuring a preset animation style in the second CSS code associated with the popup layer element.
According to the technical scheme, the embodiment of the invention has the following advantages:
in the embodiment of the invention, a mask layer element and a popup layer element in an HTML webpage structure are obtained, the hierarchical relationship between the mask layer element and the popup layer element is configured as a parent-child element, a preset layout style is configured in a first CSS code associated with the mask layer element, and a preset animation style is configured in a second CSS code associated with the popup layer element. In the embodiment of the invention, the mask layer element is configured in the HTML webpage structure, and the mask layer element is configured as the parent element of the popup layer element, so that the popup layer element is nested in the mask layer element in the embodiment of the invention, and after the layout style is configured in the first CSS code, the popup layer element can be displayed according to the layout style, thereby no JS dynamic calculation is required. The layout style may also be set to a horizontal-vertical centering style, and an animation style is configured in the second CSS code in the embodiment of the present invention, and the popup layer element may also be displayed according to the animation style. Therefore, the horizontal and vertical centering and the animation effect of the pop-up window can be simultaneously realized in the embodiment of the invention.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings needed to be used in the description of the embodiments will be briefly introduced below, and it is apparent that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other drawings can be obtained according to the drawings.
Fig. 1 is a schematic flowchart illustrating a method for processing a popup window in a web page according to an embodiment of the present invention;
fig. 2-a is a schematic structural diagram illustrating a composition of a processing apparatus for pop-up window in a web page according to an embodiment of the present invention;
fig. 2-b is a schematic structural diagram illustrating a composition of a processing apparatus for pop-up window in a web page according to an embodiment of the present invention;
fig. 3 is a schematic structural diagram of a terminal to which the processing method for popup in a web page provided in the embodiment of the present invention is applied.
Detailed Description
The embodiment of the invention provides a method and a device for processing a popup in a webpage, which are used for simultaneously realizing horizontal and vertical centering and animation effects of the popup and are free from JS dynamic calculation.
In order to make the objects, features and advantages of the present invention more obvious and understandable, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention, and it is apparent that the embodiments described below are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments that can be derived by one skilled in the art from the embodiments given herein are intended to be within the scope of the invention.
The terms "comprises" and "comprising," and any variations thereof, in the description and claims of this invention and the above-described drawings are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of elements is not necessarily limited to those elements, but may include other elements not expressly listed or inherent to such process, method, article, or apparatus.
Specific codes of the related art that can use the move (english name: transform) attribute of the CSS3 when processing a popup are as follows:
although the method solves the problem of JS dynamic calculation, confusion occurs if a transform is used for animation, because a high-weight pattern replaces a low-weight pattern according to the CSS style action principle, and a pattern behind a horizontal-level weight covers a previous pattern, so that if scaling animation setting is needed, for example, transform: scale (1.2) covers the transform: transform (-50% ) weight, a horizontal-vertical centering pattern cannot be displayed when animation needs to be performed by using the transform, because the horizontal-vertical centering pattern is covered by a passive pattern, and similarly, if a popup window needs to use the horizontal-vertical centering pattern, the animation effect of the popup window cannot be realized. Therefore, in the transform solution of CSS3, the current pop-window can only be selected from two when dealing with the horizontal and vertical centering and animation effect, and the horizontal and vertical centering and animation effect of the pop-window cannot be achieved at the same time.
In the embodiment of the invention, a mask layer can be configured in the webpage structure, the mask layer is arranged between the pop-up window and the main content, and the mask layer is a semi-transparent mask between the pop-up window and the main content. In the embodiment of the invention, one layer is a mask layer on the main content of the webpage structure, a popup layer is also arranged on the mask layer, and only the overlapped part of the two layers can be displayed. That is, where there is an object in the mask layer, it is transparent to see the object in the popup layer, and where there is no object in the mask layer, it is opaque to see the object at the corresponding position in the mask layer. According to the embodiment of the invention, the hierarchical relationship between the mask layer and the popup layer is configured as a parent layer, so that the layout style and the animation style of the popup can be displayed simultaneously. The following are detailed descriptions of the respective components. Referring to fig. 1, an embodiment of a method for processing a popup in a web page according to the present invention may be specifically applied to a process of processing the popup in the web page, and the method for processing the popup in the web page according to the embodiment of the present invention may include the following steps:
101. and acquiring the mask layer elements and the popup layer elements in the HTML webpage structure, and configuring the hierarchical relationship between the mask layer elements and the popup layer elements as parent-child elements.
In an embodiment of the present invention, the HTML web page structure is a general language of the web, which allows the web page creation process to create complex pages of text combined with pictures, which can be browsed by anyone on the web. In addition to the pop-up window layer elements, the HTML webpage structure created in the embodiment of the present invention can also introduce the mask layer elements, and the mask layer elements can cover the images in the main content graphics in the webpage linked with the mask layer, so as to create the webpage effects with various displays. After the mask layer elements and the popup layer elements are acquired from the HTML webpage structure, the hierarchical relationship between the mask layer elements and the popup layer elements is further configured as parent-child elements. In the document of the web page structure, a plurality of elements are hierarchical, such hierarchy may be an inclusion relationship (also referred to as a nesting relationship, a parent-child relationship, an inheritance relationship), or a parallel relationship (also referred to as a neighbor relationship, an adjacent relationship, a sibling relationship). In the current HTML web page structure, the mask layer element and the popup layer element are configured independently, and the level between the two elements is flat, such as brother elements. In the embodiment of the invention, the hierarchical relationship between the mask layer element and the popup layer element is configured as a parent-child element, that is, the popup layer element is embedded in the mask layer element, so that the style configuration of the mask layer element can also be effective in the popup layer element, and therefore, the popup layer element can inherit the style configuration of the mask layer element.
In some embodiments of the present invention, the step 101 configures the hierarchical relationship between the mask layer element and the popup layer element as a parent-child element, which may specifically include the following steps:
a1, inserting HTML label in the HTML web page structure, writing the mask layer element into the HTML label, and continuing to write the popup layer element in the segment (English name: section) label after the mask layer element is written in the HTML label.
An HTML tag may be inserted into the HTML web page structure, and the HTML tag may be a DIV tag, for example. After inserting an HTML tag into a specific position of an HTML webpage structure, writing a mask layer element in a class (english name: class) of the HTML, setting a section tag in the HTML tag, where the section tag has a main function of segmentation, and when the content of an element needs to be explicitly listed, using the section tag to complete the content description.
It should be noted that, in some embodiments of the present invention, in addition to completing the hierarchical relationship configuration between the mask layer element and the pop-up layer element in the application scenario shown in step a1, the mask layer element and the pop-up layer element may be written in the same H5 tag when the HTML web page structure is generated, so that the pop-up layer element can inherit the style content of the mask layer element.
102. A preset layout style is configured in a first CSS code associated with a mask layer element.
In the embodiment of the invention, after the mask layer element and the popup layer element are obtained from the HTML webpage structure, CSS style can be configured for each layer element in the HTML webpage, and CSS can more accurately control the characters, background, font and the like of the webpage layout, so that further configuration of the font, background, position and the like of local positions in the webpage can be completed, and by only correcting one CSS file, a plurality of webpage layout appearances and formats can be simultaneously updated, and the internal code of the HTML file is more simplified. In the embodiment of the invention, the CSS style associated with the mask layer element is defined as a first CSS code, the CSS style managed by the popup layer element is defined as a second CSS code, and the CSS styles of the two layer elements are distinguished through the first CSS code and the second CSS code. Next, description is given of a configuration style in the first CSS code, in an embodiment of the present invention, a preset layout style may be configured in the first CSS code, and the layout style may be flexibly selected depending on an application scenario. For example, the layout style may be a horizontal and vertical centering style, and the layout style may also be other styles, such as a frame left style, a frame right style, and the like.
In some embodiments of the present invention, the step 102 of configuring a preset layout style in the CSS code of the first cascading style sheet associated with the mask layer element may specifically include the following steps:
b1, configuring the display (english name: display) attribute in the first CSS code as a flexible layout (english name: flex) attribute, and configuring the preset layout style using the flex attribute.
The display attribute may specify a box type that the element should generate, a flex attribute of CSS3 may be used in the first CSS code, the flex attribute may configure whether the layout style is scalable in size, the scalable element may be abbreviated or enlarged as the layout style is reduced or enlarged, and the configuration of the layout style may be completed using the flex attribute, so that the mask layer element may be displayed according to the layout style, and since the pop-up layer element is nested in the mask layer element, the pop-up layer element may also be displayed according to the layout style configured in the first CSS code. In some embodiments of the present invention, in addition to completing the configuration of the first CSS code in the application scenario shown in step B1, a specific layout style may be written in the first CSS code associated with the mask layer element, and a grid (english name: grid) attribute may be used to enable the mask layer element to be directly displayed according to the layout style.
103. And configuring a preset animation style in a second CSS code associated with the popup layer element.
In the embodiment of the present invention, if the popup layer element needs to configure an animation effect, a preset animation pattern may be configured in the second CSS code, for example, the animation pattern may include an animation effect in which a popup appears and an animation effect in which the popup disappears, and specific types of the animation pattern may be various, for example, a popup layer displayed in a light and dim-out manner, a popup layer floating at the top, and the like, which is not limited herein.
In some embodiments of the present invention, step 103 configures a preset animation style in the second CSS code associated with the popup layer element, including:
and C1, adding class corresponding to the animation style before the animation in the second CSS code starts, and removing the class corresponding to the animation style after the animation in the second CSS code ends.
The method comprises the steps that a class can be added when animation effects need to be configured on popup layer elements, specifically-adopted animation effects can be configured in the class, the animation effects can be added to a popup window when the popup window is displayed, and the corresponding class needs to be removed after animation is finished.
For example, in some embodiments of the present invention, a Shrink animation is added as an example for description, but not limited to, other animation effects may also be added in embodiments of the present invention. For example, step C1 adds a class corresponding to the animation style in the second CSS code, and removes a class corresponding to the animation style in the second CSS code, including the following steps:
c11, configuring appearing animation (English name: spring-in) and disappearing animation (English name: spring-out) in the animation name attribute in the second CSS code;
c12, configuring an opacity level (English name: opacity) attribute and a deformation (English name: deformation) attribute corresponding to the animation style for the Shrink-in, and configuring an opacity attribute and a deformation attribute corresponding to the animation style for the Shrink-out.
Specifically, class to be added and removed may be spring-in and spring-out, and both the spring-in and the spring-out may be configured with an accessibility attribute and a transformation attribute, where the transformation attribute may be rotation (english name: rotate), skew (english name: skew), scale (english name: scale), and move (english name: transform), matrix deformation (english name: matrix), and the like, and the specific configuration for appearing animation and disappearing animation may be determined in accordance with an application scenario. It should be noted that the above embodiment describes only one animation implementation manner in a specific animation name attribute, and a specific animation style may be configured for different animation effects set in the popup layer element, which is not limited herein. It should be understood that in the embodiment of the present invention, the Shrink-in may also only configure the accessibility attribute, or only configure the transform attribute, and may specifically be determined by combining the application scenario, and in the embodiment of the present invention, the Shrink-out may also only configure the accessibility attribute, or only configure the transform attribute, and may specifically be determined by combining the application scenario.
In some embodiments of the present invention, in addition to executing the foregoing step 101 to step 103, the method for processing a popup window in a webpage provided in an embodiment of the present invention may further include the following steps:
d1, displaying the mask layer element and the popup layer element in the HTML webpage structure in the webpage display area according to the layout style in the first CSS code and the animation style in the second CSS code.
After the first CSS code and the second CSS code are configured in a specific style, the HTML webpage structure can be displayed, the mask layer element and the popup layer element can be displayed in a specific webpage display area, and the popup in the popup layer element can be displayed simultaneously according to a layout style and an animation style. And marking and displaying the HTML webpage displayed in the set area, and displaying different style effects on the HTML webpage correspondingly according to different statements configured in the first CSS code and the second CSS code, so that a user can check the layout style and the animation style of the popup window.
As can be seen from the description of the embodiment of the present invention in the above embodiment, the mask layer element and the popup layer element in the HTML web page structure are obtained, the hierarchical relationship between the mask layer element and the popup layer element is configured as a parent-child element, a preset layout style is configured in the first CSS code associated with the mask layer element, and a preset animation style is configured in the second CSS code associated with the popup layer element. In the embodiment of the invention, the mask layer element is configured in the HTML webpage structure, and the mask layer element is configured as the parent element of the popup layer element, so that the popup layer element is nested in the mask layer element in the embodiment of the invention, and after the layout style is configured in the first CSS code, the popup layer element can be displayed according to the layout style, thereby no JS dynamic calculation is required. The layout style may also be set to a horizontal-vertical centering style, and an animation style is configured in the second CSS code in the embodiment of the present invention, and the popup layer element may also be displayed according to the animation style. Therefore, the horizontal and vertical centering and the animation effect of the pop-up window can be simultaneously realized in the embodiment of the invention.
In order to better understand and implement the above-mentioned schemes of the embodiments of the present invention, the following description specifically illustrates corresponding application scenarios.
In the prior art, the popup always faces a trade-off when processing the horizontal and vertical centering and the animation effect, and the horizontal and vertical centering and the animation effect can be perfectly processed simultaneously in the embodiment of the invention. The technical scheme provided by the invention can simultaneously solve the problem that the width and the height of the pop-up window need to be calculated in the prior art, and can also solve the problem that animation effect and horizontal and vertical centering can not be realized by using transform.
The technical scheme provided by the embodiment of the invention can be applied to all popup windows of a mobile terminal, such as a modal box (English name: modal), a dialog box (English name: dialog), a prompt box (English name: toast) and the like, the modal is taken as an example for description, and the rest of the dialogs and toast can be similar to the mode implementation.
Firstly, optimizing an HTML webpage structure, and forming a parent-child element by a mask layer element and a popup layer element instead of a brother element, wherein the specific usable codes are as follows:
< div class ═ overlay "> <! - -a mask layer >
Section class: "modal" > <! - -pop-up window >
</div>
Next, CSS codes corresponding to the mask layer elements can be optimized, using a flex attribute of CSS3, where the flex attribute is a method of CSS3 layout, and the main codes are as follows:
the align-items are suitable for a parent container, the alignment mode of the elastic box elements in the direction of the side axis (longitudinal axis) is set or retrieved, and when all the sub-elements in one row in the elastic box cannot be stretched or reach the maximum value, the justifyContent attribute can assist in allocating redundant space. The just diffContent attribute also takes control over alignment when an element overflows a line.
Finally, directly adding and removing the corresponding class on the modal style needing animation effect, for example, the following shrink-in represents that animation appears, the shrink-out represents that animation disappears, the class is added to represent that corresponding animation is added, and the corresponding class can be removed after the animation is finished, wherein the following codes are mainly adopted:
the CSS3 animation-duration attribute is used to retrieve or set the duration of the object animation, for example, 0.3s, the value of animation-file-mode attribute is both, the object state is identified as the state of the end or the start of the animation, shrinkIn and shrinkout may be added to the key frame keyframes, the opacity represents the opacity level, the value may be 0, or 1, the transform attribute is set to scale, and the scale corresponding to scale may be 1 or 1.185 in the above example.
In the embodiment of the invention, the hierarchical relationship between the mask layer elements and the popup layer elements is adjusted to be parent-child elements, and then flex layout of css3 is skillfully applied, so that the horizontal and vertical centering effect of the popup is perfectly realized, no JS is required for dynamic calculation, and no transform attribute is used, so that one JS calculation is saved, and enough space is reserved for the animation effect of the popup.
It should be noted that, for simplicity of description, the above-mentioned method embodiments are described as a series of acts or combination of acts, but those skilled in the art will recognize that the present invention is not limited by the order of acts, as some steps may occur in other orders or concurrently in accordance with the invention. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required by the invention.
To facilitate a better implementation of the above-described aspects of embodiments of the present invention, the following also provides relevant means for implementing the above-described aspects.
Referring to fig. 2-a, an apparatus 200 for processing a popup window in a web page according to an embodiment of the present invention may include: a pop-up layer nesting module 201, a layout configuration module 202, and an animation configuration module 203, wherein,
the pop-up window layer nesting module 201 is used for acquiring a mask layer element and a pop-up window layer element in a hypertext markup language (HTML) webpage structure, and configuring a hierarchical relationship between the mask layer element and the pop-up window layer element as a parent-child element;
a layout configuration module 202, configured to configure a preset layout style in a first cascading style sheet CSS code associated with the mask layer element;
and the animation configuration module 203 is configured to configure a preset animation style in the second CSS code associated with the popup layer element.
In some embodiments of the present invention, the pop-up layer nesting module 201 is specifically configured to insert an HTML tag into the HTML web page structure, write the mask layer element into the HTML tag, and continue to write the pop-up layer element in a segmentation section tag after the mask layer element is written in the HTML tag.
In some embodiments of the present invention, the layout configuration module 202 is specifically configured to configure the display attribute in the first CSS code as an elastic layout flex attribute, and configure the preset layout style using the flex attribute.
In some embodiments of the present invention, the animation configuration module 203 is specifically configured to add a class corresponding to an animation style before an animation in the second CSS code starts, and remove the class corresponding to the animation style after the animation in the second CSS code ends.
Further, in some embodiments of the present invention, the animation configuration module 203 is specifically configured to configure an appearance animation shrnk-in and a disappearance animation shrnk-out in the animation name attribute in the second CSS code; configuring an opacity level attribute and a deformation transform attribute corresponding to the animation style for the Shrink-in, and configuring the opacity level attribute and the deformation transform attribute corresponding to the animation style for the Shrink-out.
In some embodiments of the present invention, referring to fig. 2-b, the apparatus 200 for processing pop-up windows in a web page further includes: and the web page display module 204 is configured to display the mask layer element and the popup layer element in the HTML web page structure in a web page display area according to the layout style in the first CSS code and the animation style in the second CSS code.
As can be seen from the above description of the embodiment of the present invention, the mask layer element and the popup layer element in the HTML web page structure are obtained, the hierarchical relationship between the mask layer element and the popup layer element is configured as a parent-child element, a preset layout style is configured in the first CSS code associated with the mask layer element, and a preset animation style is configured in the second CSS code associated with the popup layer element. In the embodiment of the invention, the mask layer element is configured in the HTML webpage structure, and the mask layer element is configured as the parent element of the popup layer element, so that the popup layer element is nested in the mask layer element in the embodiment of the invention, and after the layout style is configured in the first CSS code, the popup layer element can be displayed according to the layout style, thereby no JS dynamic calculation is required. The layout style may also be set to a horizontal-vertical centering style, and an animation style is configured in the second CSS code in the embodiment of the present invention, and the popup layer element may also be displayed according to the animation style. Therefore, the horizontal and vertical centering and the animation effect of the pop-up window can be simultaneously realized in the embodiment of the invention.
An embodiment of the present invention further provides a terminal, as shown in fig. 3, for convenience of description, only a part related to the embodiment of the present invention is shown, and details of the specific technology are not disclosed, please refer to the method part of the embodiment of the present invention. The terminal may be any terminal device including a mobile phone, a tablet computer, a PDA (Personal Digital Assistant), a POS (Point of sales), a vehicle-mounted computer, etc., taking the terminal as the mobile phone as an example:
fig. 3 is a block diagram illustrating a partial structure of a mobile phone related to a terminal provided by an embodiment of the present invention. Referring to fig. 3, the cellular phone includes: radio Frequency (RF) circuit 1010, memory 1020, input unit 1030, display unit 1040, sensor 1050, audio circuit 1060, wireless fidelity (WiFi) module 1070, processor 1080, and power source 1090. Those skilled in the art will appreciate that the handset configuration shown in fig. 3 is not intended to be limiting and may include more or fewer components than those shown, or some components may be combined, or a different arrangement of components.
The following describes each component of the mobile phone in detail with reference to fig. 3:
The memory 1020 can be used for storing software programs and modules, and the processor 1080 executes various functional applications and data processing of the mobile phone by operating the software programs and modules stored in the memory 1020. The memory 1020 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required by at least one function (such as a sound playing function, an image playing function, etc.), and the like; the storage data area may store data (such as audio data, a phonebook, etc.) created according to the use of the cellular phone, and the like. Further, the memory 1020 may include high speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid state storage device.
The input unit 1030 may be used to receive input numeric or character information and generate key signal inputs related to user settings and function control of the cellular phone. Specifically, the input unit 1030 may include a touch panel 1031 and other input devices 1032. The touch panel 1031, also referred to as a touch screen, may collect touch operations by a user (e.g., operations by a user on or near the touch panel 1031 using any suitable object or accessory such as a finger, a stylus, etc.) and drive corresponding connection devices according to a preset program. Alternatively, the touch panel 1031 may include two parts, a touch detection device and a touch controller. The touch detection device detects the touch direction of a user, detects a signal brought by touch operation and transmits the signal to the touch controller; the touch controller receives touch information from the touch sensing device, converts the touch information into touch point coordinates, sends the touch point coordinates to the processor 1080, and can receive and execute commands sent by the processor 1080. In addition, the touch panel 1031 may be implemented by various types such as a resistive type, a capacitive type, an infrared ray, and a surface acoustic wave. The input unit 1030 may include other input devices 1032 in addition to the touch panel 1031. In particular, other input devices 1032 may include, but are not limited to, one or more of a physical keyboard, function keys (such as volume control keys, switch keys, etc.), a track ball, a mouse, a joystick, or the like.
The display unit 1040 may be used to display information input by a user or information provided to the user and various menus of the cellular phone. The Display unit 1040 may include a Display panel 1041, and optionally, the Display panel 1041 may be configured in the form of a Liquid Crystal Display (LCD), an Organic Light-Emitting Diode (OLED), or the like. Further, the touch panel 1031 can cover the display panel 1041, and when the touch panel 1031 detects a touch operation on or near the touch panel 1031, the touch operation is transmitted to the processor 1080 to determine the type of the touch event, and then the processor 1080 provides a corresponding visual output on the display panel 1041 according to the type of the touch event. Although in fig. 3, the touch panel 1031 and the display panel 1041 are two separate components to implement the input and output functions of the mobile phone, in some embodiments, the touch panel 1031 and the display panel 1041 may be integrated to implement the input and output functions of the mobile phone.
The handset may also include at least one sensor 1050, such as a light sensor, motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor, wherein the ambient light sensor may adjust the brightness of the display panel 1041 according to the brightness of ambient light, and the proximity sensor may turn off the display panel 1041 and/or the backlight when the mobile phone moves to the ear. As one of the motion sensors, the accelerometer sensor can detect the magnitude of acceleration in each direction (generally, three axes), can detect the magnitude and direction of gravity when stationary, and can be used for applications of recognizing the posture of a mobile phone (such as horizontal and vertical screen switching, related games, magnetometer posture calibration), vibration recognition related functions (such as pedometer and tapping), and the like; as for other sensors such as a gyroscope, a barometer, a hygrometer, a thermometer, and an infrared sensor, which can be configured on the mobile phone, further description is omitted here.
WiFi belongs to short-distance wireless transmission technology, and the mobile phone can help the user to send and receive e-mail, browse web pages, access streaming media, etc. through the WiFi module 1070, which provides wireless broadband internet access for the user. Although fig. 3 shows the WiFi module 1070, it is understood that it does not belong to the essential constitution of the handset, and can be omitted entirely as needed within the scope not changing the essence of the invention.
The processor 1080 is a control center of the mobile phone, connects various parts of the whole mobile phone by using various interfaces and lines, and executes various functions of the mobile phone and processes data by operating or executing software programs and/or modules stored in the memory 1020 and calling data stored in the memory 1020, thereby integrally monitoring the mobile phone. Optionally, processor 1080 may include one or more processing units; preferably, the processor 1080 may integrate an application processor, which handles primarily the operating system, user interfaces, applications, etc., and a modem processor, which handles primarily the wireless communications. It is to be appreciated that the modem processor described above may not be integrated into processor 1080.
The handset also includes a power source 1090 (e.g., a battery) for powering the various components, which may preferably be logically coupled to the processor 1080 via a power management system to manage charging, discharging, and power consumption via the power management system.
Although not shown, the mobile phone may further include a camera, a bluetooth module, etc., which are not described herein.
In the embodiment of the present invention, the processor 1080 included in the terminal further has a flow of a processing method for controlling and executing the above popup window in the web page executed by the terminal.
It should be noted that the above-described embodiments of the apparatus are merely schematic, where the units described as separate parts may or may not be physically separate, and the parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. In addition, in the drawings of the embodiment of the apparatus provided by the present invention, the connection relationship between the modules indicates that there is a communication connection between them, and may be specifically implemented as one or more communication buses or signal lines. One of ordinary skill in the art can understand and implement it without inventive effort.
Through the above description of the embodiments, those skilled in the art will clearly understand that the present invention may be implemented by software plus necessary general hardware, and may also be implemented by special hardware including special integrated circuits, special CPUs, special memories, special components and the like. Generally, functions performed by computer programs can be easily implemented by corresponding hardware, and specific hardware structures for implementing the same functions may be various, such as analog circuits, digital circuits, or dedicated circuits. However, the implementation of a software program is a more preferable embodiment for the present invention. Based on such understanding, the technical solutions of the present invention may be embodied in the form of a software product, which is stored in a readable storage medium, such as a floppy disk, a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk of a computer, and includes instructions for enabling a computer device (which may be a personal computer, a server, or a network device) to execute the methods according to the embodiments of the present invention.
In summary, the above embodiments are only used for illustrating the technical solutions of the present invention, and not for limiting the same; although the present invention has been described in detail with reference to the above embodiments, it will be understood by those of ordinary skill in the art that: the technical solutions described in the above embodiments may still be modified, or some technical features may be equivalently replaced; and such modifications or substitutions do not depart from the spirit and scope of the corresponding technical solutions of the embodiments of the present invention.
Claims (12)
1. A method for processing a popup in a webpage is characterized by comprising the following steps:
acquiring a mask layer element and a popup layer element in a hypertext markup language (HTML) webpage structure, and configuring a hierarchical relationship between the mask layer element and the popup layer element as a parent-child element;
configuring a preset layout style in a first Cascading Style Sheet (CSS) code associated with the mask layer element;
configuring a preset animation style in a second CSS code associated with the popup layer element;
so that the popup in the popup element can be simultaneously displayed according to the layout style and the animation style.
2. The method of claim 1, wherein configuring the hierarchical relationship between the mask layer element and the popup layer element as a parent-child element comprises:
inserting an HTML tag into the HTML webpage structure, writing the mask layer element into the HTML tag, and continuing to write the popup layer element in a segmentation section tag after the mask layer element is written in the HTML tag.
3. The method of claim 1, wherein configuring the preset layout style in the CSS code of the first cascading style sheet associated with the mask layer element comprises:
and configuring a display attribute in the first CSS code as an elastic layout flex attribute, and configuring a preset layout style by using the flex attribute.
4. The method of claim 1, wherein configuring a preset animation style in the second CSS code associated with the popup layer element comprises:
and adding a class corresponding to the animation style before the animation in the second CSS code starts, and removing the class corresponding to the animation style after the animation in the second CSS code ends.
5. The method according to any one of claims 1 to 4, further comprising:
and displaying the mask layer element and the popup layer element in the HTML webpage structure in a webpage display area according to the layout style in the first CSS code and the animation style in the second CSS code.
6. A device for processing a popup in a web page, comprising:
the popup layer nesting module is used for acquiring a mask layer element and a popup layer element in a hypertext markup language (HTML) webpage structure and configuring the hierarchical relationship between the mask layer element and the popup layer element as a parent-child element;
the layout configuration module is used for configuring a preset layout style in a first Cascading Style Sheet (CSS) code associated with the mask layer element;
the animation configuration module is used for configuring a preset animation style in a second CSS code associated with the popup layer element;
so that the popup in the popup element can be simultaneously displayed according to the layout style and the animation style.
7. The apparatus of claim 6, wherein the pop-layer nesting module is further configured to insert an HTML tag in the HTML web page structure, write the mask layer element into the HTML tag, and continue writing the pop-layer element in a segment section tag subsequent to writing the mask layer element in the HTML tag.
8. The apparatus according to claim 6, wherein the layout configuration module is specifically configured to configure the display attribute in the first CSS code as an elastic layout flex attribute, and configure the preset layout style using the flex attribute.
9. The apparatus of claim 6, wherein the animation configuration module is specifically configured to add a class corresponding to an animation style before an animation in the second CSS code starts, and remove the class corresponding to the animation style after the animation in the second CSS code ends.
10. The apparatus according to any one of claims 6 to 9, wherein the apparatus for processing pop-up window in the web page further comprises: and the webpage display module is used for displaying the mask layer element and the popup layer element in the HTML webpage structure in a webpage display area according to the layout style in the first CSS code and the animation style in the second CSS code.
11. A terminal, characterized in that the device comprises a processor and a memory:
the memory is used for storing program codes and transmitting the program codes to the processor;
the processor is used for executing the processing method of popup window in the webpage according to any one of claims 1-5 according to the instructions in the program code.
12. A computer-readable storage medium for storing a program code for executing the processing method of popup window in a web page according to any of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610592175.5A CN106168978B (en) | 2016-07-25 | 2016-07-25 | Method and device for processing popup in webpage |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610592175.5A CN106168978B (en) | 2016-07-25 | 2016-07-25 | Method and device for processing popup in webpage |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106168978A CN106168978A (en) | 2016-11-30 |
| CN106168978B true CN106168978B (en) | 2020-12-15 |
Family
ID=58065578
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610592175.5A Active CN106168978B (en) | 2016-07-25 | 2016-07-25 | Method and device for processing popup in webpage |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106168978B (en) |
Families Citing this family (16)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107133030B (en) * | 2017-03-30 | 2021-01-05 | 腾讯科技（深圳）有限公司 | Dynamic event execution method and device |
| CN107391165A (en) * | 2017-06-01 | 2017-11-24 | 阿里巴巴集团控股有限公司 | Control display methods, client and storage medium |
| CN107391115B (en) * | 2017-06-28 | 2018-10-23 | 武汉斗鱼网络科技有限公司 | A kind of method, apparatus and computer equipment for realizing pop-up alternative events |
| CN107908793A (en) * | 2017-12-13 | 2018-04-13 | 上海携程商务有限公司 | The method and system of web page popup window |
| CN110489117A (en) * | 2018-05-15 | 2019-11-22 | 车伯乐（北京）信息科技有限公司 | A kind of page layout method and device |
| CN109032737A (en) * | 2018-07-18 | 2018-12-18 | 上海哔哩哔哩科技有限公司 | Pop-up message display system, method, storage medium and intelligent terminal |
| CN110874251A (en) * | 2018-08-29 | 2020-03-10 | 北京京东尚科信息技术有限公司 | Method and device for realizing picture wooden barrel layout |
| CN109445786B (en) * | 2018-10-19 | 2022-02-11 | 成都安恒信息技术有限公司 | Method for realizing universal popup page based on JavaScript |
| CN109885795A (en) * | 2019-01-25 | 2019-06-14 | 平安科技（深圳）有限公司 | A kind of end Web animation configuration method and device |
| CN112558846B (en) * | 2019-09-25 | 2022-07-29 | 北京国双科技有限公司 | Page data processing method and device |
| CN112667942A (en) * | 2019-10-16 | 2021-04-16 | 腾讯科技（深圳）有限公司 | Animation generation method, device and medium |
| CN111273841B (en) * | 2020-02-11 | 2021-08-17 | 天津车之家数据信息技术有限公司 | Page processing method and mobile terminal |
| CN112099891B (en) * | 2020-09-10 | 2024-01-12 | 亚信科技（南京）有限公司 | Popup display method and device, electronic equipment and computer readable storage medium |
| CN114428923A (en) * | 2022-01-26 | 2022-05-03 | 北京有竹居网络技术有限公司 | Method and device for presenting popup effect, electronic equipment and storage medium |
| CN114924815A (en) * | 2022-03-31 | 2022-08-19 | 北京达佳互联信息技术有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN115617218B (en) * | 2022-12-20 | 2023-03-07 | 江西曼荼罗软件有限公司 | Click-free message popup box display method, device and equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP3491488B2 (en) * | 1996-03-19 | 2004-01-26 | 株式会社日立製作所 | Method of forming uneven portion of magnetic disk |
| CN102663056A (en) * | 2012-03-29 | 2012-09-12 | 奇智软件（北京）有限公司 | Method and device for displaying picture elements |
| CN104731821A (en) * | 2013-12-24 | 2015-06-24 | 中国银联股份有限公司 | Webpage masking method for asynchronous request mode |
| CN105224564A (en) * | 2014-06-25 | 2016-01-06 | 广州市动景计算机科技有限公司 | A kind of webpage adapts to screen composition method and device |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6904561B1 (en) * | 2001-07-19 | 2005-06-07 | Microsoft Corp. | Integrated timeline and logically-related list view |
| CN103677493B (en) * | 2012-09-06 | 2018-03-23 | 腾讯科技（深圳）有限公司 | Pop-out display methods and device |
| CN103955366B (en) * | 2014-04-18 | 2017-04-19 | 南威软件股份有限公司 | Producing method of visualized website template |
| CN105487758B (en) * | 2015-12-11 | 2019-04-30 | 小米科技有限责任公司 | Application software pop-up control method, device and terminal device |
-
2016
- 2016-07-25 CN CN201610592175.5A patent/CN106168978B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP3491488B2 (en) * | 1996-03-19 | 2004-01-26 | 株式会社日立製作所 | Method of forming uneven portion of magnetic disk |
| CN102663056A (en) * | 2012-03-29 | 2012-09-12 | 奇智软件（北京）有限公司 | Method and device for displaying picture elements |
| CN104731821A (en) * | 2013-12-24 | 2015-06-24 | 中国银联股份有限公司 | Webpage masking method for asynchronous request mode |
| CN105224564A (en) * | 2014-06-25 | 2016-01-06 | 广州市动景计算机科技有限公司 | A kind of webpage adapts to screen composition method and device |
Non-Patent Citations (1)
| Title |
|---|
| 基于 OOCSS 与 NEC 方案开发 Web 前端研究;李艺志 等;《电脑编程技巧与维护》;20151231(第20期);30-31、46 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106168978A (en) | 2016-11-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106168978B (en) | Method and device for processing popup in webpage | |
| CN106775637B (en) | Page display method and device for application program | |
| JP7359920B2 (en) | Image processing method and flexible screen terminal | |
| US10839137B2 (en) | Method and apparatus for playing video in independent window by browser, and storage medium | |
| US10768881B2 (en) | Multi-screen interaction method and system in augmented reality scene | |
| CN107943390B (en) | Character copying method and mobile terminal | |
| EP2851779A1 (en) | Method, device, storage medium and terminal for displaying a virtual keyboard | |
| CN110764666B (en) | Display control method and electronic equipment | |
| CN108205398B (en) | Method and device for adapting webpage animation to screen | |
| CN105718189B (en) | Electronic device and method for displaying webpage by using same | |
| CN103365356A (en) | Method and apparatus for displaying on electronic device | |
| WO2021129772A1 (en) | Display method for virtual keyboard, and electronic device | |
| US20130167013A1 (en) | Method of presenting digital data on an electronic device operating under different environmental conditions | |
| US11294533B2 (en) | Method and terminal for displaying 2D application in VR device | |
| KR20140105689A (en) | Method for providing a feedback in response to user input and terminal implementing the same | |
| CN110069188B (en) | Identification display method and terminal equipment | |
| CN111414143A (en) | Display control method, electronic device, and medium | |
| EP4057601A1 (en) | Message processing method and electronic device | |
| CN111580815B (en) | Page element editing method and related equipment | |
| CN107368231A (en) | A kind of theme processing method and Related product | |
| CN104281568B (en) | Paraphrasing display method and paraphrasing display device | |
| CN107992249A (en) | The generation method and device of a kind of reading note | |
| CN104216929A (en) | Method and device for intercepting page elements | |
| CN111124709A (en) | Text processing method and electronic equipment | |
| CN107885512A (en) | A kind of application program installation method, mobile terminal |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |