Pop-up display method, device, storage medium, and electronic device
By adjusting the position and size of pop-up windows, the problem of pop-up window occlusion is solved, the visual correlation between pop-up windows and target nodes is achieved and the user experience is improved, and the convenient display of multi-level pop-up windows is supported.
Patent Information
- Application Number
- CN202210720037.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-06-23
- Publication Date
- 2025-08-12
- Estimated Expiration
- 2042-06-23
AI Technical Summary
In the prior art, the fixed display position of the pop-up window can easily block important information, affect the user experience, and cannot visually correlate with the target node, reducing user review efficiency.
By receiving pop-up display instructions, we can obtain the size of the target node and the page's visual area, adjust the pop-up position to avoid obstructing the target node, and display pop-up windows in the page's visual area, supporting multi-level pop-up window size adjustment.
The visual correlation between pop-up windows and target nodes is realized, avoiding occlusion, improving user experience, and providing convenient access in multi-level pop-up window display.
Smart Images

Figure CN115357314B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of computer information processing technology, and in particular to a pop-up window display method, device, storage medium, and electronic device. Background Art
[0002] A pop-up window is an information window that appears within the user's current page. It's typically smaller than the current page and appears to float above it. Because of their eye-catching nature, pop-ups are often used to push important messages.
[0003] At present, pop-up technology has been widely used in various scenarios. For example, enterprise-related information is displayed through pop-ups. When users want to further view the detailed information of a certain enterprise in the displayed enterprise relationship map, they only need to select the corresponding company node in the enterprise relationship map to view the detailed information of a certain company node through the pop-up window.
[0004] In the prior art, the display position of the pop-up window is usually fixed, and the fixed display position of the pop-up window is likely to cause the pop-up window to block information that is important to the user or that the user currently needs to refer to, which will affect the user experience. Figure 1 As shown, when a user wants to view the detailed information of a certain enterprise node in the enterprise relationship map, he clicks on the enterprise node (i.e., the target node), and a pop-up window recording the detailed information of the enterprise node will be fixedly displayed on the far left of the enterprise relationship map, blocking most of the enterprise relationship map, and the pop-up window cannot generate a visual association with the clicked enterprise node, which reduces the user experience. Summary of the Invention
[0005] In order to overcome the shortcomings of the above-mentioned existing technologies, one of the purposes of the present invention is to provide a pop-up display method, device, storage medium and electronic device to avoid the pop-up window blocking the target node and affecting user use, while creating a visual association between the pop-up window and the target node to facilitate user corresponding reference.
[0006] Another object of the present invention is to provide a pop-up display method, device, storage medium and electronic device, so that when performing multi-level pop-up display, by adjusting the size of each level of pop-up window, the lower-level pop-up window that the user wants to view can be displayed in the visible area of the page, providing convenience for the user to view and improving the user experience.
[0007] To achieve the above object, the present invention provides a pop-up window display method, which includes:
[0008] Receive pop-up display instructions for the target node and obtain the pop-up information corresponding to the target node;
[0009] Obtain the position and size of the target node and the size of the visible area of the page, and determine the position of the pop-up window based on the position and size of the target node and the size of the visible area of the page, so that the pop-up window does not block the target node and is within the visible area of the page when displayed;
[0010] Display the pop-up window according to its location.
[0011] Optionally, obtaining the position and size of the target node and the size of the visible area of the page, and determining the position of the pop-up window according to the position and size of the target node and the size of the visible area of the page, includes:
[0012] Get the center coordinates and size of the target node and the size of the visible area of the page;
[0013] Adjust the coordinate position of the pop-up window according to the distance between the center coordinates of the target node and the boundary of the page's visible area and the size of the target node.
[0014] Optionally, the coordinate position of the pop-up window is adjusted according to the distance between the center coordinates of the target node and the boundary of the visible area of the page and the size of the target node, including:
[0015] When the horizontal coordinate of the center coordinate of the target node is less than or equal to half the width of the visible area of the page, the coordinate position of the pop-up window is determined by determining the coordinate of the upper left corner of the pop-up window;
[0016] Alternatively, when the horizontal coordinate of the center coordinate of the target node is greater than half the width of the visible area of the page, the coordinate position of the pop-up window is determined by determining the coordinate of the upper right corner vertex of the pop-up window.
[0017] Optionally, when the horizontal coordinate of the center coordinate of the target node is less than or equal to half the width of the visible area of the page, determining the coordinate position of the pop-up window by determining the coordinate of the upper left corner vertex of the pop-up window includes: determining that the horizontal coordinate of the upper left corner vertex of the pop-up window is greater than or equal to the sum of the horizontal coordinate of the center coordinate of the target node and half the width of the target node, and the vertical coordinate of the upper left corner vertex of the pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the pop-up window;
[0018] Alternatively, when the horizontal coordinate of the center coordinate of the target node is greater than half the width of the visible area of the page, the coordinate position of the pop-up window is determined by determining the coordinate of the upper right corner vertex of the pop-up window, including: determining that the horizontal coordinate of the upper right corner vertex of the pop-up window is less than or equal to the difference between the horizontal coordinate of the center coordinate of the target node and half the width of the target node, and the vertical coordinate of the upper right corner vertex of the pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the pop-up window.
[0019] Optionally, the vertical coordinate of the top left corner vertex of the pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is greater than the height of the visible area of the page, then the vertical coordinate of the top left corner vertex of the pop-up window is the difference between the height of the visible area of the page and the height of the pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is less than or equal to the height of the visible area of the page, then the vertical coordinate of the top left corner vertex of the pop-up window is the vertical coordinate of the center coordinate of the target node;
[0020] Alternatively, the vertical coordinate of the upper right corner vertex of the pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the page visible area is less than the height of the pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is greater than the height of the page visible area, then the vertical coordinate of the upper right corner vertex of the pop-up window is the difference between the height of the page visible area and the height of the pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is less than or equal to the height of the page visible area, then the vertical coordinate of the upper right corner vertex of the pop-up window is the vertical coordinate of the center coordinate of the target node.
[0021] Optionally, the method further includes:
[0022] If a target node size change trigger event is received when the pop-up window is displayed, the position and size of the target node and the size of the page visible area are re-acquired, and the position of the pop-up window is re-determined based on the re-determined position and size of the target node and the size of the page visible area.
[0023] Optionally, the method further includes:
[0024] If the user triggers the display of a subordinate pop-up window of the current pop-up window and the current pop-up window is located to the right of the target node, determine whether the distance from the upper right corner of the current pop-up window to the right vertical boundary of the page visible area is greater than or equal to the width of the subordinate pop-up window;
[0025] If the distance from the top-right corner of the current pop-up window to the right vertical border of the visible area of the page is greater than or equal to the width of the subordinate pop-up window, determine that the horizontal coordinate of the top-left corner of the subordinate pop-up window is greater than or equal to the horizontal coordinate of the top-right corner of the current pop-up window; or, if the distance from the top-right corner of the current pop-up window to the right vertical border of the visible area of the page is less than the width of the subordinate pop-up window, scale the subordinate pop-up window, or scale the current pop-up window and / or the previous pop-up window so that the distance from the top-right corner of the current pop-up window to the right vertical border of the visible area of the page is greater than or equal to the width of the subordinate pop-up window;
[0026] The vertical coordinate of the upper left corner vertex of the subordinate pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window.
[0027] Optionally, the method further includes:
[0028] If the user triggers the display of a subordinate pop-up window of the current pop-up window and the current pop-up window is located to the left of the target node, determine whether the distance from the upper left corner of the current pop-up window to the left vertical border of the page's visible area is greater than or equal to the width of the subordinate pop-up window;
[0029] If the distance from the top-left corner of the current pop-up window to the left vertical border of the visible area of the page is greater than or equal to the width of the subordinate pop-up window, determine that the horizontal coordinate of the top-right corner of the subordinate pop-up window is less than or equal to the horizontal coordinate of the top-left corner of the current pop-up window; or, if the distance from the top-left corner of the current pop-up window to the left vertical border of the visible area of the page is less than the width of the subordinate pop-up window, scale the subordinate pop-up window, or scale the current pop-up window and / or the previous pop-up window so that the distance from the top-left corner of the current pop-up window to the left vertical border of the visible area of the page is greater than or equal to the width of the subordinate pop-up window;
[0030] The vertical coordinate of the upper right corner vertex of the subordinate pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window.
[0031] Optionally, the vertical coordinate of the upper left corner vertex of the subordinate pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is greater than the height of the visible area of the page, then the vertical coordinate of the upper left corner vertex of the subordinate pop-up window is the difference between the height of the visible area of the page and the height of the subordinate pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is less than or equal to the height of the visible area of the page, then the vertical coordinate of the upper left corner vertex of the subordinate pop-up window is the vertical coordinate of the center coordinate of the target node;
[0032] Alternatively, the vertical coordinate of the upper right corner vertex of the subordinate pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the page visible area is less than the height of the subordinate pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is greater than the height of the page visible area, then the vertical coordinate of the upper right corner vertex of the subordinate pop-up window is the difference between the height of the page visible area and the height of the subordinate pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is less than or equal to the height of the page visible area, then the vertical coordinate of the upper right corner vertex of the subordinate pop-up window is the vertical coordinate of the center coordinate of the target node.
[0033] To achieve the above-mentioned object, the present invention further provides a pop-up display device, which includes:
[0034] The pop-up window information acquisition module is used to receive the pop-up window display instruction for the target node and obtain the pop-up window information corresponding to the target node;
[0035] The pop-up window position adjustment module is used to obtain the position and size of the target node and the size of the page visible area, and determine the position of the pop-up window based on the position and size of the target node and the size of the page visible area, so that the pop-up window does not block the target node and is within the page visible area when displayed;
[0036] The pop-up display module is used to display pop-ups according to their positions.
[0037] To achieve the above-mentioned purpose, the present invention also provides a storage medium on which a computer program is stored, and when the computer program is executed by a processor, the steps of the above-mentioned pop-up display method are implemented.
[0038] To achieve the above-mentioned purpose, the present invention also provides an electronic device, including a memory, a processor and storage; a computer program on the memory and capable of running on the processor, characterized in that the steps of the above-mentioned pop-up display method are implemented when the processor executes the computer program.
[0039] The pop-up display method, device, storage medium and electronic device provided by the present invention determine the position of the pop-up window based on the position and size of the target node and the size of the page visible area when displaying the pop-up window of the target node, so that the pop-up window does not block the target node and is within the page visible area when displayed. This not only avoids blocking the target node, but also creates a visual association between the pop-up window and the target node, thereby enhancing the user experience. In addition, when performing multi-level pop-up window display, by adjusting the size of the pop-up windows at each level, the lower-level pop-up window that the user wants to view can be displayed within the page visible area, which provides convenience for user viewing and improves the user experience.
[0040] The technical solution of the present invention is further described in detail below through the accompanying drawings and embodiments. BRIEF DESCRIPTION OF THE DRAWINGS
[0041] The above and other objects, features, and advantages of the present invention will become more apparent through a more detailed description of the embodiments of the present invention in conjunction with the accompanying drawings. The accompanying drawings are provided to provide a further understanding of the embodiments of the present invention and constitute a part of the specification. Together with the embodiments of the present invention, they are used to explain the present invention and are not intended to limit the present invention. In the drawings, the same reference numerals generally represent the same components or steps.
[0042] Figure 1 This is a schematic diagram of a pop-up window blocking a target node in the prior art;
[0043] Figure 2 1 is a flowchart of a pop-up window display method provided by an exemplary embodiment of the present invention;
[0044] Figure 3 and Figure 4 is a schematic diagram of determining the coordinates of the upper left corner of a pop-up window in an exemplary embodiment of the present invention;
[0045] Figure 5 and Figure 6 is a schematic diagram of determining the coordinates of the upper right corner of a pop-up window in an exemplary embodiment of the present invention;
[0046] Figure 7 This is a schematic diagram of a pop-up window display effect in an exemplary embodiment of the present invention;
[0047] Figure 8 is a structural diagram of a pop-up display device provided by an exemplary embodiment of the present invention;
[0048] Figure 9 This is a structure of an electronic device provided by an exemplary embodiment of the present invention. DETAILED DESCRIPTION
[0049] Below, the exemplary embodiments according to the present invention will be described in detail with reference to the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments of the present invention, and it should be understood that the present invention is not limited to the exemplary embodiments described herein.
[0050] It should be noted that the relative arrangement of components and steps, the numerical expressions and numerical values set forth in these embodiments do not limit the scope of the present invention unless specifically stated otherwise.
[0051] Those skilled in the art will understand that the terms "first" and "second" in the embodiments of the present invention are only used to distinguish different steps, devices or modules, and neither represent any specific technical meaning nor indicate the necessary logical order between them.
[0052] It should also be understood that, in the embodiments of the present invention, “a plurality of” may refer to two or more than two, and “at least one” may refer to one, two or more than two.
[0053] It should also be understood that any component, data or structure mentioned in the embodiments of the present invention can generally be understood as one or more, unless explicitly limited or otherwise indicated in the context.
[0054] In addition, the term "and / or" in this invention merely describes an association relationship between related objects, indicating that three possible relationships exist. For example, A and / or B can represent: A exists alone, A and B exist simultaneously, and B exists alone. Furthermore, the character " / " in this invention generally indicates that the related objects are in an "or" relationship.
[0055] It should also be understood that the description of the various embodiments of the present invention focuses on the differences between the various embodiments, and the same or similar aspects thereof can be referenced with each other. For the sake of brevity, they will not be described one by one.
[0056] At the same time, it should be understood that for the convenience of description, the sizes of the various parts shown in the drawings are not drawn according to the actual proportional relationship.
[0057] The following description of at least one exemplary embodiment is merely illustrative in nature and is in no way intended to limit the invention, its application, or uses.
[0058] Technologies, methods, and equipment known to ordinary technicians in the relevant art may not be discussed in detail, but where appropriate, they should be considered part of the specification.
[0059] It should be noted that like reference numerals and letters refer to like items in the following figures, and therefore, once an item is defined in one figure, it need not be further discussed in subsequent figures.
[0060] Embodiments of the present invention can be applied to electronic devices such as terminal devices, computer systems, and servers, and can operate in conjunction with numerous other general-purpose or specialized computing system environments or configurations. Examples of well-known terminal devices, computing systems, environments, and / or configurations suitable for use with terminal devices, computer systems, servers, and other electronic devices include, but are not limited to, personal computer systems, server computer systems, thin clients, thick clients, handheld or laptop devices, microprocessor-based systems, set-top boxes, programmable consumer electronics, network personal computers, minicomputer systems, mainframe computer systems, and distributed cloud computing technology environments including any of the above.
[0061] Electronic devices such as terminal devices, computer systems, and servers can be described in the general context of computer system-executable instructions (such as program modules) executed by a computer system. Generally, program modules can include routines, programs, object programs, components, logic, data structures, etc., which perform specific tasks or implement specific abstract data types. Computer systems / servers can be implemented in a distributed cloud computing environment, where tasks are performed by remote processing devices linked via a communication network. In a distributed cloud computing environment, program modules can be located on local or remote computing system storage media, including storage devices.
[0062] Exemplary Methods
[0063] Figure 2 FIG. 1 is a flow chart of a pop-up window display method provided by an exemplary embodiment of the present invention. Figure 2As shown, the method includes the following steps:
[0064] Step 101: Receive a pop-up window display instruction for a target node and obtain pop-up window information corresponding to the target node;
[0065] The method of the embodiments of the present invention can be applied to electronic devices, which can be any mobile terminal with mobile communication functions, including but not limited to smart electronic devices such as smartphones and tablets, and can also be personal computers. Any electronic device that can display page pop-up windows can be applied to the method of the embodiments of the present invention.
[0066] In an embodiment of the present invention, a page may have one or more nodes that can be displayed in a pop-up window. For example, a page displaying a corporate relationship map may have multiple nodes, such as a company name node, a key personnel node, and a subsidiary name node. For each node, further detailed information can be displayed in a pop-up window.
[0067] When a user triggers a target node on the page displaying the enterprise relationship map, such as clicking on the company name node, a pop-up display instruction for displaying a pop-up window for the target node will be triggered. When the system obtains the pop-up display instruction, it requests the pop-up data corresponding to the target node from the server through the pop-up interface, and then the server returns the pop-up information corresponding to the target node through the pop-up interface. The pop-up information mainly includes the detailed data information of the pop-up corresponding to the target node, and the detailed data information of the pop-up corresponding to the target node includes but is not limited to the width w and height h of the pop-up window, the ID of the corresponding page, the pop-up detailed information and the jump address, etc.
[0068] Of course, in embodiments of the present invention, user operations on a target node are not limited to click operations. Operations that cause the target node to resize, such as scrolling, can also be performed. For example, using a computer mouse wheel to scroll generates an onMouseDown or onMouseUp event to change the zoom factor of the target node. When no pop-up window is triggered, the scrolling operation only changes the size of the target node. However, when a pop-up window is already displayed, the onMouseDown or onMouseUp event not only changes the size of the target node but also triggers an update to the position of the displayed pop-up window.
[0069] Step 102: Obtain the position and size of the target node and the size of the visible area of the page, and determine the position of the pop-up window based on the position and size of the target node and the size of the visible area of the page, so that the pop-up window does not block the target node when displayed and is within the visible area of the page.
[0070] Specifically, step 102 includes:
[0071] Step 1021: Obtain the center coordinates and size of the target node and the size of the visible area of the page.
[0072] In an embodiment of the present invention, taking the target node as a circular node as an example, when the user clicks on the target node, the center coordinates and radius of the currently clicked target node can be obtained through the page script. Taking the current page as an H5 page and implemented through a canvas drawing board as an example, the size of the page visible area is the size of the canvas drawing board. Generally speaking, the size of the canvas drawing board is consistent with the resolution size of the screen of the current electronic device, and the present invention is not limited to this.
[0073] Specifically, when a target node is clicked, it corresponds to a click on the item node of the group in Paper.js (an open source vector graphics script framework that runs on the HTML5 Canvas). By obtaining the center coordinates and radius of the target node in the group, the center coordinates of the target node are the coordinates of the origin coordinate axis relative to the visible area of the page (i.e., the canvas).
[0074] Optionally, when a trigger event of a target node size change is received, for example, on a PC, when the user scrolls the target node using the mouse wheel, such as onMouseDown or onMouseUp, the center coordinates, pre-scaling radius, and zoom ratio of the target node can be obtained through the group, and the size of the target node's post-scaling radius can be determined based on the zoom ratio and pre-scaling radius.
[0075] Of course, the click operation can also be understood as a case where the zoom ratio is 1, that is, it can be understood as obtaining the center coordinates of the target node, the radius before the operation, and the zoom ratio through the group, and obtaining the size of the radius after the operation based on the zoom ratio and the radius before the operation.
[0076] Step 1022: Adjust the coordinate position of the pop-up window according to the distance between the center coordinate of the target node and the boundary of the visible area of the page and the size of the target node.
[0077] In an embodiment of the present invention, when the coordinates of the center coordinate of the target node relative to the coordinate axis of the canvas origin are obtained as (x, y), the width width and height height of the screen canvas are obtained, and the following judgment is performed:
[0078] Step 10221: When the horizontal coordinate of the center coordinate of the target node is less than or equal to half the width of the visible area of the page, the coordinate position of the pop-up window is determined by determining the coordinate of the upper left corner of the pop-up window;
[0079] Optionally, step 10221 specifically includes: determining that the horizontal coordinate of the upper left corner vertex of the pop-up window is greater than or equal to the sum of the horizontal coordinate of the center coordinate of the target node and half the width of the target node, and the vertical coordinate of the upper left corner vertex of the pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the pop-up window.
[0080] Optionally, the vertical coordinate of the upper left corner vertex of the pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the page visible area is less than the height of the pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is greater than the height of the page visible area, then the vertical coordinate of the upper left corner vertex of the pop-up window is the difference between the height of the page visible area and the height of the pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is less than or equal to the height of the page visible area, then the vertical coordinate of the upper left corner vertex of the pop-up window is the vertical coordinate of the center coordinate of the target node
[0081] In a specific implementation of the embodiment of the present invention, if the horizontal coordinate x of the center coordinate of the target node is less than ()×width, Figure 3 and Figure 4 As shown, the horizontal coordinate x of the top left corner of the pop-up window is 弹 Determine x 弹 ≥x+r, r is the radius of the target node, preferably, x 弹 =x+r, the vertical coordinate of the top left corner of the pop-up window is determined by whether the distance from the center of the target node to the bottom edge of the canvas drawing board (i.e., the visible area of the page) is less than the height h of the pop-up window. If the distance from the center of the target node to the bottom edge of the canvas drawing board is less than or equal to the height of the pop-up window, that is, the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is less than or equal to the height of the canvas drawing board, y+h≤height, then the vertical coordinate y of the top left corner of the pop-up window is 弹 Determined to be y 弹 =y, such as Figure 3 As shown; if the distance from the center of the target node to the bottom edge of the canvas is greater than the height of the pop-up window, that is, the sum of the vertical coordinates of the center coordinates of the target node and the height of the pop-up window is greater than the height of the canvas, y+h>height, then the vertical coordinate y of the top left corner of the pop-up window is 弹 Determined to be y 弹 =height-h, such as Figure 4 shown.
[0082] Step 10222: When the horizontal coordinate of the center coordinate of the target node is greater than half the width of the visible area of the page, the coordinate position of the pop-up window is determined by determining the coordinate of the upper right corner vertex of the pop-up window.
[0083] Optionally, step 10222 specifically includes: determining that the horizontal coordinate of the upper right corner vertex of the pop-up window is less than or equal to the difference between the horizontal coordinate of the center coordinate of the target node and half the width of the target node, and the vertical coordinate of the upper right corner vertex of the pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the pop-up window.
[0084] Optionally, the vertical coordinate of the upper right corner vertex of the pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the page visible area is less than the height of the pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is greater than the height of the page visible area, then the vertical coordinate of the upper right corner vertex of the pop-up window is the difference between the height of the page visible area and the height of the pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is less than or equal to the height of the page visible area, then the vertical coordinate of the upper right corner vertex of the pop-up window is the vertical coordinate of the center coordinate of the target node.
[0085] In a specific implementation of the embodiment of the present invention, if the horizontal coordinate x of the center coordinate of the target node is greater than ()×width, as Figure 5 and Figure 6 As shown, the horizontal coordinate x of the top right corner of the pop-up window is 弹 Determine x 弹 ≤xr, r is the radius of the target node, preferably, the horizontal coordinate x 弹 Determine x 弹 = xr, the vertical coordinate of the top right corner of the pop-up window is determined by whether the distance from the center of the target node to the bottom edge of the canvas is less than the height h of the pop-up window. If the distance from the center of the target node to the bottom edge of the canvas is less than or equal to the height of the pop-up window, that is, the vertical coordinate of the center coordinate of the target node y + h ≤ height, then the vertical coordinate y of the top right corner of the pop-up window is 弹 Determined to be y 弹 =y, such as Figure 5 As shown; if the distance from the center of the target node to the bottom edge of the canvas is greater than the height of the pop-up window, that is, the sum of the vertical coordinates of the center coordinates of the target node and the height of the pop-up window is greater than the height of the canvas, y+h>height, then the vertical coordinate y of the top right corner of the pop-up window is 弹 Determined to be y 弹 =height-h, such as Figure 6 shown.
[0086] It should be noted that step 1021, step 1022, step 10221 and step 10222 are not shown in the figure.
[0087] Step 103: Display the pop-up window according to the position of the pop-up window.
[0088] Specifically, first determine the coordinate position of the upper left corner vertex or the upper right corner vertex of the pop-up window according to step 102, that is, determine the DOM node position of the pop-up window, and then display the DOM node details of the pop-up window at the determined pop-up window position according to the pop-up window information obtained in step 101.
[0089] Since the specific pop-up window display adopts existing technology, it will not be described in detail here. Figure 7 The figure shows the pop-up window display result after clicking the target node "A Certain International Cultural Development Co., Ltd." in an embodiment of the present invention.
[0090] In an optional implementation of an embodiment of the present invention, the method in this embodiment also includes: if a target node size change trigger event is received when the pop-up window is displayed, the position and size of the target node and the size of the visible area of the page are re-acquired, and the position of the pop-up window is re-determined based on the re-determined position and size of the target node and the size of the visible area of the page. That is, when a target node size change trigger event is received when the pop-up window is displayed, the method returns to step 102 to re-determine the position of the pop-up window. This method can flexibly adjust the position of the pop-up window according to the zoom ratio after the user zooms the visible area of the page, thereby avoiding the pop-up window blocking the target node and improving the user experience.
[0091] In an embodiment of the present invention, when a user displays a pop-up window to a target node, a target node size change event is generated by triggering. Taking a pop-up window on a PC page as an example, assuming that the user generates an onMouseDown or onMouseUp event by scrolling the mouse wheel, the process returns to step 102, and the center coordinates and size of the target node after the event are determined based on the onMouseDown or onMouseUp event of the item node in paper.js, thereby redetermining the position of the pop-up window so that the redetermined pop-up window does not obscure the changed target node. Of course, for a pop-up window on a mobile terminal page, if the user triggers a target node size change trigger event by touching the touch screen, the process also returns to step 102 to redetermine the position of the pop-up window, which will not be elaborated here.
[0092] Optionally, in this embodiment of the present invention, multi-level pop-up windows may be optimized for display, which includes two optional implementations, as described below:
[0093] In a first optional implementation manner, the method in the embodiment of the present invention further includes:
[0094] If the user triggers the display of a subordinate pop-up window of the current pop-up window and the current pop-up window is located to the right of the target node, determine whether the distance from the upper right corner of the current pop-up window to the right vertical boundary of the page visible area is greater than or equal to the width of the subordinate pop-up window;
[0095] If the distance from the top-right corner of the current pop-up window to the right vertical border of the visible area of the page is greater than or equal to the width of the subordinate pop-up window, determine that the horizontal coordinate of the top-left corner of the subordinate pop-up window is greater than or equal to the horizontal coordinate of the top-right corner of the current pop-up window; or, if the distance from the top-right corner of the current pop-up window to the right vertical border of the visible area of the page is less than the width of the subordinate pop-up window, scale the subordinate pop-up window, or scale the current pop-up window and / or the previous pop-up window so that the distance from the top-right corner of the current pop-up window to the right vertical border of the visible area of the page is greater than or equal to the width of the subordinate pop-up window;
[0096] The vertical coordinate of the top left corner vertex of the subordinate pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window. Specifically, the vertical coordinate of the top left corner vertex of the subordinate pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is greater than the height of the visible area of the page, then the vertical coordinate of the top left corner vertex of the subordinate pop-up window is the difference between the height of the visible area of the page and the height of the subordinate pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is less than or equal to the height of the visible area of the page, then the vertical coordinate of the top left corner vertex of the subordinate pop-up window is the vertical coordinate of the center coordinate of the target node.
[0097] In a second optional implementation manner, the method in the embodiment of the present invention further includes:
[0098] If the user triggers the display of a subordinate pop-up window of the current pop-up window and the current pop-up window is located to the left of the target node, determine whether the distance from the upper left corner of the current pop-up window to the left vertical border of the page's visible area is greater than or equal to the width of the subordinate pop-up window;
[0099] If the distance from the top-left corner of the current pop-up window to the left vertical border of the visible area of the page is greater than or equal to the width of the subordinate pop-up window, determine that the horizontal coordinate of the top-right corner of the subordinate pop-up window is less than or equal to the horizontal coordinate of the top-left corner of the current pop-up window; or, if the distance from the top-left corner of the current pop-up window to the left vertical border of the visible area of the page is less than the width of the subordinate pop-up window, scale the subordinate pop-up window, or scale the current pop-up window and / or the previous pop-up window so that the distance from the top-left corner of the current pop-up window to the left vertical border of the visible area of the page is greater than or equal to the width of the subordinate pop-up window;
[0100] The ordinate of the top - right vertex of the lower - level pop - up window is determined based on whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the lower - level pop - up window. Specifically, the ordinate of the top - right vertex of the lower - level pop - up window is determined based on whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the lower - level pop - up window, including: if the sum of the ordinate of the center coordinate of the target node and the height of the lower - level pop - up window is greater than the height of the visible area of the page, then the ordinate of the top - right vertex of the lower - level pop - up window is the difference between the height of the visible area of the page and the height of the lower - level pop - up window; if the sum of the ordinate of the center coordinate of the target node and the height of the lower - level pop - up window is less than or equal to the height of the visible area of the page, then the ordinate of the top - right vertex of the lower - level pop - up window is the ordinate of the center coordinate of the target node.
[0101] Optionally, when the user triggers the display of the lower - level pop - up window, the focus of attention is generally on the lower - level pop - up window. Therefore, in order to enable the user to view the lower - level pop - up window more clearly, even if the area corresponding to the boundary of the visible area of the page on the same side as the current pop - up window can normally accommodate and display the lower - level pop - up window, when displaying the lower - level pop - up window, the size of the current pop - up window and / or the more - previous - level pop - up window is scaled and adjusted according to a preset scaling ratio, so that the user can view the lower - level pop - up window more clearly.
[0102] Among them, the preset scaling ratio can be selected by those skilled in the art according to actual needs and is not limited here.
[0103] Specifically, if the area corresponding to the boundary of the visible area of the page on the same side as the first - level pop - up window can accommodate the second - level pop - up window, in order for the user to view the second - level pop - up window more clearly, the first - level pop - up window is scaled according to the preset scaling ratio to highlight the display of the second - level pop - up window.
[0104] Taking the first - level pop - up window with the current pop - up window as the target node as an example, if the area corresponding to the boundary of the visible area of the page on the same side as the first - level pop - up window cannot accommodate the second - level pop - up window, then the scaling ratio of the second - level pop - up window is determined according to the calculated distance from the first - level pop - up window to the boundary of the visible area of the page on the same side as the first - level pop - up window and the width of the second - level pop - up window. The scaling ratio should be such that the second - level pop - up window can be displayed in the area corresponding to the boundary of the visible area of the page on the same side as the first - level pop - up window. For example, the distance from the first - level pop - up window to the boundary of the visible area of the page on the same side as the first - level pop - up window is d, and the width of the second - level pop - up window is d1, and d < d1, then the determined scaling ratio is less than or equal to d / d1, and then the second - level pop - up window is scaled according to the determined scaling ratio and displayed in the area corresponding to the boundary of the visible area of the page on the same side as the first - level pop - up window.
[0105] In this embodiment, when the distance from the current pop-up window to the boundary of the page visible area cannot accommodate the subordinate pop-up window, the scaling ratio is determined according to the distance from the current pop-up window to the boundary of the page visible area, the size of the subordinate pop-up window, and the size of the current-level and / or previous-level pop-up windows. The current-level and / or previous-level pop-up windows are scaled according to the scaling ratio. The area from the scaled current pop-up window to the boundary of the page visible area can normally display the subordinate pop-up window, and then the subordinate pop-up window is displayed in the area from the scaled current pop-up window to the boundary of the page visible area.
[0106] For example, when the area corresponding to the boundary of the page visible area on the same side as the first-level pop-up window cannot accommodate the second-level pop-up window, assume that the distance from the first-level pop-up window to the boundary of the page visible area on the same side as the first-level pop-up window is d, the width of the second-level pop-up window is d1, where d < d1, and the width of the current pop-up window and / or previous-level pop-up window is d2. Then the determined scaling ratio is less than or equal to (d + d2 - d1) / d2. The current pop-up window and / or previous-level pop-up window are scaled according to this scaling ratio. The area from the scaled first-level pop-up window to the boundary of the page visible area on the same side as the first-level pop-up window can normally display the second-level pop-up window, and then the second-level pop-up window is displayed in the area from the scaled first-level pop-up window to the boundary of the page visible area on the same side as the first-level pop-up window.
[0107] The pop-up window display method provided by the present invention first determines the position of the pop-up window based on the position and size of the target node and the size of the page visible area when displaying the pop-up window of the target node, so that the pop-up window is not blocked by the target node and is within the page visible area when displayed. This not only avoids blocking the target node but also makes the pop-up window and the target node visually related, enhancing the user experience. In addition, when performing multi-level pop-up window display, by adjusting the sizes of each level of pop-up windows, the subordinate pop-up window that the user wants to view can be displayed within the page visible area, providing convenience for the user to view and improving the user experience.
[0108] Exemplary devices
[0109] Figure 8 It is the system structure diagram of the pop-up window display device provided by an exemplary embodiment of the present invention. As Figure 8 shown, the device includes:
[0110] A pop-up window information acquisition module 801, configured to receive a pop-up window display instruction for a target node and acquire the pop-up window information corresponding to the target node;
[0111] A pop-up window position adjustment module 802, configured to acquire the position and size of the target node and the size of the page visible area, and determine the position of the pop-up window according to the position and size of the target node and the size of the page visible area, so that the pop-up window is not blocked by the target node and is within the page visible area when displayed;
[0112] The pop-up window display module 803 is used to display the pop-up window according to the position of the pop-up window.
[0113] Optionally, the pop-up window position adjustment module 802 is specifically configured to:
[0114] Get the center coordinates and size of the target node and the size of the visible area of the page;
[0115] Adjust the coordinate position of the pop-up window according to the distance between the center coordinates of the target node and the boundary of the page's visible area and the size of the target node.
[0116] Optionally, the coordinate position of the pop-up window is adjusted according to the distance between the center coordinates of the target node and the boundary of the visible area of the page and the size of the target node, including:
[0117] When the horizontal coordinate of the center coordinate of the target node is less than or equal to half the width of the visible area of the page, the coordinate position of the pop-up window is determined by determining the coordinate of the upper left corner of the pop-up window;
[0118] Alternatively, when the horizontal coordinate of the center coordinate of the target node is greater than half the width of the visible area of the page, the coordinate position of the pop-up window is determined by determining the coordinate of the upper right corner vertex of the pop-up window.
[0119] Optionally, when the horizontal coordinate of the center coordinate of the target node is less than or equal to half the width of the visible area of the page, determining the coordinate position of the pop-up window by determining the coordinate of the upper left corner vertex of the pop-up window includes: determining that the horizontal coordinate of the upper left corner vertex of the pop-up window is greater than or equal to the sum of the horizontal coordinate of the center coordinate of the target node and half the width of the target node, and the vertical coordinate of the upper left corner vertex of the pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the pop-up window;
[0120] Alternatively, when the horizontal coordinate of the center coordinate of the target node is greater than half the width of the visible area of the page, the coordinate position of the pop-up window is determined by determining the coordinate of the upper right corner vertex of the pop-up window, including: determining that the horizontal coordinate of the upper right corner vertex of the pop-up window is less than or equal to the difference between the horizontal coordinate of the center coordinate of the target node and half the width of the target node, and the vertical coordinate of the upper right corner vertex of the pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the pop-up window.
[0121] Optionally, the vertical coordinate of the top left corner vertex of the pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is greater than the height of the visible area of the page, then the vertical coordinate of the top left corner vertex of the pop-up window is the difference between the height of the visible area of the page and the height of the pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is less than or equal to the height of the visible area of the page, then the vertical coordinate of the top left corner vertex of the pop-up window is the vertical coordinate of the center coordinate of the target node;
[0122] Alternatively, the vertical coordinate of the upper right corner vertex of the pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the page visible area is less than the height of the pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is greater than the height of the page visible area, then the vertical coordinate of the upper right corner vertex of the pop-up window is the difference between the height of the page visible area and the height of the pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is less than or equal to the height of the page visible area, then the vertical coordinate of the upper right corner vertex of the pop-up window is the vertical coordinate of the center coordinate of the target node.
[0123] Optionally, the method further includes:
[0124] If a target node size change trigger event is received when the pop-up window is displayed, the position and size of the target node and the size of the page visible area are re-acquired, and the position of the pop-up window is re-determined based on the re-determined position and size of the target node and the size of the page visible area.
[0125] Optionally, the method further includes:
[0126] If the user triggers the display of a subordinate pop-up window of the current pop-up window and the current pop-up window is located to the right of the target node, determine whether the distance from the upper right corner of the current pop-up window to the right vertical boundary of the page visible area is greater than or equal to the width of the subordinate pop-up window;
[0127] If the distance from the top-right corner of the current pop-up window to the right vertical border of the visible area of the page is greater than or equal to the width of the subordinate pop-up window, determine that the horizontal coordinate of the top-left corner of the subordinate pop-up window is greater than or equal to the horizontal coordinate of the top-right corner of the current pop-up window; or, if the distance from the top-right corner of the current pop-up window to the right vertical border of the visible area of the page is less than the width of the subordinate pop-up window, scale the subordinate pop-up window, or scale the current pop-up window and / or the previous pop-up window so that the distance from the top-right corner of the current pop-up window to the right vertical border of the visible area of the page is greater than or equal to the width of the subordinate pop-up window;
[0128] The vertical coordinate of the upper left corner vertex of the subordinate pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window.
[0129] Optionally, the method further includes:
[0130] If the user triggers the display of a subordinate pop-up window of the current pop-up window and the current pop-up window is located to the left of the target node, determine whether the distance from the upper left corner of the current pop-up window to the left vertical border of the page's visible area is greater than or equal to the width of the subordinate pop-up window;
[0131] If the distance from the top-left corner of the current pop-up window to the left vertical border of the visible area of the page is greater than or equal to the width of the subordinate pop-up window, determine that the horizontal coordinate of the top-right corner of the subordinate pop-up window is less than or equal to the horizontal coordinate of the top-left corner of the current pop-up window; or, if the distance from the top-left corner of the current pop-up window to the left vertical border of the visible area of the page is less than the width of the subordinate pop-up window, scale the subordinate pop-up window, or scale the current pop-up window and / or the previous pop-up window so that the distance from the top-left corner of the current pop-up window to the left vertical border of the visible area of the page is greater than or equal to the width of the subordinate pop-up window;
[0132] The vertical coordinate of the upper right corner vertex of the subordinate pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window.
[0133] Optionally, the vertical coordinate of the upper left corner vertex of the subordinate pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is greater than the height of the visible area of the page, then the vertical coordinate of the upper left corner vertex of the subordinate pop-up window is the difference between the height of the visible area of the page and the height of the subordinate pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is less than or equal to the height of the visible area of the page, then the vertical coordinate of the upper left corner vertex of the subordinate pop-up window is the vertical coordinate of the center coordinate of the target node;
[0134] Alternatively, the vertical coordinate of the upper right corner vertex of the subordinate pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the page visible area is less than the height of the subordinate pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is greater than the height of the page visible area, then the vertical coordinate of the upper right corner vertex of the subordinate pop-up window is the difference between the height of the page visible area and the height of the subordinate pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is less than or equal to the height of the page visible area, then the vertical coordinate of the upper right corner vertex of the subordinate pop-up window is the vertical coordinate of the center coordinate of the target node.
[0135] The pop-up display method provided in the embodiment of the present invention corresponds to the pop-up display device provided in the embodiment of the present invention. Other descriptions can refer to the description of the pop-up display method provided in the embodiment of the present invention, and will not be repeated here.
[0136] The pop-up display device provided by the present invention determines the position of the pop-up window based on the position and size of the target node and the size of the page visible area when displaying the pop-up window of the target node, so that the pop-up window does not block the target node and is within the page visible area when displayed. This not only avoids blocking the target node, but also enables the pop-up window and the target node to have a visual association, thereby enhancing the user experience. In addition, when performing multi-level pop-up window display, by adjusting the size of the pop-up windows at each level, the lower-level pop-up window that the user wants to view can be displayed within the page visible area, which provides convenience for user viewing and improves the user experience.
[0137] Exemplary electronic devices
[0138] Figure 9 This is the structure of an electronic device provided by an exemplary embodiment of the present invention. The electronic device may be either or both of the first device and the second device, or a standalone device independent of them. The standalone device may communicate with the first device and the second device to receive the collected input signals from them. Figure 9 As shown, the electronic device 90 includes one or more processors 91 and a memory 92 .
[0139] The processor 91 may be a central processing unit (CPU) or other forms of processing units having data processing capabilities and / or instruction execution capabilities, and may control other components in the electronic device to perform desired functions.
[0140] The memory 92 may include one or more computer program products, which may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. The volatile memory may, for example, include random access memory (RAM) and / or cache memory (cache), etc. The non-volatile memory may, for example, include read-only memory (ROM), hard disk, flash memory, etc. One or more computer program instructions may be stored on the computer-readable storage medium, and the processor 91 may run the program instructions to implement the pop-up display method of the software program of each embodiment of the present disclosure described above and / or other desired functions. In one example, the electronic device may further include: an input device 93 and an output device 94, which are interconnected via a bus system and / or other forms of connection mechanisms (not shown).
[0141] In addition, the input device 93 may also include, for example, a keyboard, a mouse, and the like.
[0142] The output device 94 can output various information to the outside. The output device 94 can include, for example, a display, a speaker, a printer, a communication network and a remote output device connected thereto.
[0143] Of course, to simplify, Figure 9 Only some of the components related to the present disclosure in the electronic device are shown, and components such as a bus, an input / output interface, etc. are omitted. In addition, the electronic device may further include any other appropriate components according to specific application scenarios.
[0144] Exemplary computer program products and computer-readable storage media
[0145] In addition to the above-mentioned methods and devices, an embodiment of the present disclosure may also be a computer program product, which includes computer program instructions, which, when executed by a processor, enable the processor to execute the steps of the pop-up display method according to various embodiments of the present disclosure described in the above-mentioned "Exemplary Method" section of this specification.
[0146] The computer program product may be written in any combination of one or more programming languages to implement the operations of the disclosed embodiments, including object-oriented programming languages such as Java, C++, and conventional procedural programming languages such as C or similar programming languages. The program code may be executed entirely on the user's computing device, partially on the user's computing device, as a standalone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server.
[0147] In addition, an embodiment of the present disclosure may also be a computer-readable storage medium having computer program instructions stored thereon, which, when executed by a processor, enable the processor to execute the steps of the pop-up display method according to various embodiments of the present disclosure described in the above "Exemplary Method" section of this specification.
[0148] The computer-readable storage medium can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can, for example, include but is not limited to a system, device or component of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination thereof. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof.
[0149] The basic principles of the present disclosure have been described above in conjunction with specific embodiments. However, it should be noted that the advantages, strengths, and effects mentioned in this disclosure are merely illustrative and not restrictive, and should not be construed as necessarily possessed by each embodiment of the present disclosure. Furthermore, the specific details disclosed above are provided for illustrative purposes and to facilitate understanding, rather than as limitations. These details do not limit the present disclosure to necessarily being implemented using these specific details.
[0150] Each embodiment in this specification is described in a progressive manner, with each embodiment focusing on its differences from the other embodiments. References to the same or similar parts between the various embodiments are sufficient. For system embodiments, since they largely correspond to method embodiments, their description is relatively simple. For relevant parts, references to the description of the method embodiments are sufficient.
[0151] The block diagrams of the devices, devices, equipment, and systems involved in this disclosure are merely illustrative examples and are not intended to require or imply that they must be connected, arranged, or configured in the manner shown in the block diagrams. As will be appreciated by those skilled in the art, these devices, devices, equipment, and systems can be connected, arranged, or configured in any manner. Words such as "include," "comprise," "have," and the like are open-ended words, meaning "including but not limited to," and can be used interchangeably therewith. The words "or" and "and" used herein refer to the words "and / or" and can be used interchangeably therewith, unless the context clearly indicates otherwise. The word "such as" used herein refers to the phrase "such as but not limited to," and can be used interchangeably therewith.
[0152] The methods and apparatus of the present disclosure may be implemented in many ways. For example, the methods and apparatus of the present disclosure may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above order of steps for the method is for illustration only, and the steps of the method of the present disclosure are not limited to the order specifically described above unless otherwise specified. In addition, in some embodiments, the present disclosure may also be implemented as programs recorded in a recording medium, which include machine-readable instructions for implementing the methods according to the present disclosure. Thus, the present disclosure also covers recording media that store programs for executing the methods according to the present disclosure.
[0153] It should also be noted that, in the apparatus, equipment and method of the present disclosure, each component or each step can be decomposed and / or recombined. These decompositions and / or recombinations should be regarded as equivalent schemes of the present disclosure. The above description of the disclosed aspects is provided to enable any technician in this field to make or use the present disclosure. Various modifications to these aspects will be very obvious to those skilled in the art, and the general principles defined herein can be applied to other aspects without departing from the scope of the present disclosure. Therefore, the present disclosure is not intended to be limited to the aspects shown here, but to the widest range consistent with the principles and novel features disclosed herein.
[0154] The above description has been provided for the purpose of illustration and description. In addition, this description is not intended to limit the embodiments of the present disclosure to the forms disclosed herein. Although a number of example aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, alterations, additions, and sub-combinations thereof.
Claims
1. A pop-up window display method, characterized in that: The method comprises: Receive a pop-up window display instruction for a target node and obtain pop-up window information corresponding to the target node; Obtaining the position and size of the target node and the size of the visible area of the page, and determining the position of the pop-up window based on the position and size of the target node and the size of the visible area of the page, so that the pop-up window does not block the target node and is within the visible area of the page when displayed; Displaying the pop-up window according to the position of the pop-up window; If the user triggers the display of a subordinate pop-up window of the current pop-up window and the current pop-up window is located to the right of the target node, determine whether the distance from the upper right corner vertex of the current pop-up window to the right vertical boundary of the visible area of the page is greater than or equal to the width of the subordinate pop-up window; If the distance from the upper-rightmost vertex of the current pop-up window to the right longitudinal boundary of the visible area of the page is greater than or equal to the width of the subordinate pop-up window, determine that the horizontal coordinate of the upper-leftmost vertex of the subordinate pop-up window is greater than or equal to the horizontal coordinate of the upper-rightmost vertex of the current pop-up window; or, if the distance from the upper-rightmost vertex of the current pop-up window to the right longitudinal boundary of the visible area of the page is less than the width of the subordinate pop-up window, scale the subordinate pop-up window, or scale the current pop-up window and / or the previous pop-up window so that the distance from the upper-rightmost vertex of the current pop-up window to the right longitudinal boundary of the visible area of the page is greater than or equal to the width of the subordinate pop-up window; The vertical coordinate of the upper left corner vertex of the subordinate pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window; If the user triggers the display of a subordinate pop-up window of the current pop-up window and the current pop-up window is located to the left of the target node, determine whether the distance from the upper left corner of the current pop-up window to the left vertical boundary of the visible area of the page is greater than or equal to the width of the subordinate pop-up window; If the distance from the upper-left corner vertex of the current pop-up window to the left longitudinal boundary of the visible area of the page is greater than or equal to the width of the subordinate pop-up window, determine that the horizontal coordinate of the upper-right corner vertex of the subordinate pop-up window is less than or equal to the horizontal coordinate of the upper-left corner vertex of the current pop-up window; or, if the distance from the upper-left corner vertex of the current pop-up window to the left longitudinal boundary of the visible area of the page is less than the width of the subordinate pop-up window, scale the subordinate pop-up window, or scale the current pop-up window and / or the previous pop-up window so that the distance from the upper-left corner vertex of the current pop-up window to the left longitudinal boundary of the visible area of the page is greater than or equal to the width of the subordinate pop-up window; The vertical coordinate of the upper rightmost vertex of the subordinate pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window.
2. The pop-up window display method according to claim 1, wherein: The acquiring the position and size of the target node and the size of the visible area of the page, and determining the position of the pop-up window according to the position and size of the target node and the size of the visible area of the page, includes: Obtain the center coordinates and size of the target node and the size of the visible area of the page; The coordinate position of the pop-up window is adjusted according to the distance between the center coordinates of the target node and the boundary of the visible area of the page and the size of the target node.
3. The pop-up window display method according to claim 2, wherein: The adjusting the coordinate position of the pop-up window according to the distance between the center coordinates of the target node and the boundary of the visible area of the page and the size of the target node includes: When the horizontal coordinate of the center coordinate of the target node is less than or equal to half the width of the visible area of the page, the coordinate position of the pop-up window is determined by determining the coordinate of the upper left corner vertex of the pop-up window; Alternatively, when the horizontal coordinate of the center coordinate of the target node is greater than half the width of the visible area of the page, the coordinate position of the pop-up window is determined by determining the coordinate of the upper right corner vertex of the pop-up window.
4. The pop-up window display method according to claim 3, wherein: When the horizontal coordinate of the center coordinate of the target node is less than or equal to half the width of the visible area of the page, determining the coordinate position of the pop-up window by determining the coordinate of the upper left corner vertex of the pop-up window includes: determining that the horizontal coordinate of the upper left corner vertex of the pop-up window is greater than or equal to the sum of the horizontal coordinate of the center coordinate of the target node and half the width of the target node, and the vertical coordinate of the upper left corner vertex of the pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the pop-up window; Alternatively, when the horizontal coordinate of the center coordinate of the target node is greater than half the width of the visible area of the page, the coordinate position of the pop-up window is determined by determining the coordinate of the upper right corner vertex of the pop-up window, including: determining that the horizontal coordinate of the upper right corner vertex of the pop-up window is less than or equal to the difference between the horizontal coordinate of the center coordinate of the target node and half the width of the target node, and the vertical coordinate of the upper right corner vertex of the pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the pop-up window.
5. The pop-up window display method according to claim 4, wherein: The vertical coordinate of the top left corner vertex of the pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is greater than the height of the visible area of the page, then the vertical coordinate of the top left corner vertex of the pop-up window is the difference between the height of the visible area of the page and the height of the pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is less than or equal to the height of the visible area of the page, then the vertical coordinate of the top left corner vertex of the pop-up window is the vertical coordinate of the center coordinate of the target node; Alternatively, the vertical coordinate of the upper right corner vertex of the pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is greater than the height of the visible area of the page, then the vertical coordinate of the upper right corner vertex of the pop-up window is the difference between the height of the visible area of the page and the height of the pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the pop-up window is less than or equal to the height of the visible area of the page, then the vertical coordinate of the upper right corner vertex of the pop-up window is the vertical coordinate of the center coordinate of the target node.
6. The pop-up window display method according to claim 1, wherein: The method also includes: if a target node size change trigger event is received when the pop-up window is displayed, the position and size of the target node and the size of the visible area of the page are re-acquired, and the position of the pop-up window is re-determined based on the re-determined position and size of the target node and the size of the visible area of the page.
7. The pop-up window display method according to claim 1, wherein: The vertical coordinate of the upper left corner vertex of the subordinate pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is greater than the height of the visible area of the page, then the vertical coordinate of the upper left corner vertex of the subordinate pop-up window is the difference between the height of the visible area of the page and the height of the subordinate pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is less than or equal to the height of the visible area of the page, then the vertical coordinate of the upper left corner vertex of the subordinate pop-up window is the vertical coordinate of the center coordinate of the target node; Alternatively, the vertical coordinate of the upper right corner vertex of the subordinate pop-up window is determined based on whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window, including: if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is greater than the height of the visible area of the page, then the vertical coordinate of the upper right corner vertex of the subordinate pop-up window is the difference between the height of the visible area of the page and the height of the subordinate pop-up window; if the sum of the vertical coordinate of the center coordinate of the target node and the height of the subordinate pop-up window is less than or equal to the height of the visible area of the page, then the vertical coordinate of the upper right corner vertex of the subordinate pop-up window is the vertical coordinate of the center coordinate of the target node.
8. A pop-up display device, characterized in that: The device comprises: A pop-up window information acquisition module is used to receive a pop-up window display instruction for a target node and obtain the pop-up window information corresponding to the target node; A pop-up window position adjustment module is used to obtain the position and size of the target node and the size of the visible area of the page, and determine the position of the pop-up window based on the position and size of the target node and the size of the visible area of the page, so that the pop-up window does not block the target node and is within the visible area of the page when displayed; A pop-up window display module, configured to display the pop-up window according to its position; If the user triggers the display of a subordinate pop-up window of the current pop-up window and the current pop-up window is located to the right of the target node, determine whether the distance from the upper right corner vertex of the current pop-up window to the right vertical boundary of the visible area of the page is greater than or equal to the width of the subordinate pop-up window; If the distance from the upper-rightmost vertex of the current pop-up window to the right longitudinal boundary of the visible area of the page is greater than or equal to the width of the subordinate pop-up window, determine that the horizontal coordinate of the upper-leftmost vertex of the subordinate pop-up window is greater than or equal to the horizontal coordinate of the upper-rightmost vertex of the current pop-up window; or, if the distance from the upper-rightmost vertex of the current pop-up window to the right longitudinal boundary of the visible area of the page is less than the width of the subordinate pop-up window, scale the subordinate pop-up window, or scale the current pop-up window and / or the previous pop-up window so that the distance from the upper-rightmost vertex of the current pop-up window to the right longitudinal boundary of the visible area of the page is greater than or equal to the width of the subordinate pop-up window; The vertical coordinate of the upper left corner vertex of the subordinate pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window; If the user triggers the display of a subordinate pop-up window of the current pop-up window and the current pop-up window is located to the left of the target node, determine whether the distance from the upper left corner of the current pop-up window to the left vertical boundary of the visible area of the page is greater than or equal to the width of the subordinate pop-up window; If the distance from the upper-left corner vertex of the current pop-up window to the left longitudinal boundary of the visible area of the page is greater than or equal to the width of the subordinate pop-up window, determine that the horizontal coordinate of the upper-right corner vertex of the subordinate pop-up window is less than or equal to the horizontal coordinate of the upper-left corner vertex of the current pop-up window; or, if the distance from the upper-left corner vertex of the current pop-up window to the left longitudinal boundary of the visible area of the page is less than the width of the subordinate pop-up window, scale the subordinate pop-up window, or scale the current pop-up window and / or the previous pop-up window so that the distance from the upper-left corner vertex of the current pop-up window to the left longitudinal boundary of the visible area of the page is greater than or equal to the width of the subordinate pop-up window; The vertical coordinate of the upper rightmost vertex of the subordinate pop-up window is determined according to whether the distance from the center of the target node to the bottom boundary of the visible area of the page is less than the height of the subordinate pop-up window.
9. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the pop-up display method according to any one of claims 1 to 7 are implemented.
10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the steps of the pop-up display method according to any one of claims 1 to 7 are implemented.
Citation Information
Patent Citations
Pop-up window position determination method and device, equipment and storage medium
CN110865865A
Page content display method and device, electronic equipment and computer readable medium
CN111831386A