Pop-up box display method and device, equipment, medium and program product

Abstract

The invention discloses a pop-up box display method and device, equipment, a medium and a program product, and relates to the technical field of front-end development. The method comprises the steps that when it is detected that a target page element corresponding to a pop-up box in a sub-application page is clicked, a main application obtains the target page element, at least one sub-element associated with the target page element and pop-up box display data corresponding to the target page element from a display layer rendering container instance, obtaining a pop-up box display function from the presentation layer rendering container instance through a bridging event associated with the click function of the target page element; and triggering the execution of the pop-up box display function, and performing pop-up box rendering on the main application page based on the target page element, the sub-element associated with the target page element and the pop-up box display data corresponding to the target page element so as to realize pop-up box display and pop-up box mask of the pop-up box in the main application page. According to the technical scheme provided by the embodiment of the invention, the mask display of the pop-up box on the main application page and the sub-application page is realized, and the interactivity of software system integration is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end development, and in particular, to a method, device, equipment, medium and program product for displaying a pop-up window. Background Art

[0002] For the convenience of integration, in the integration of large software systems, the presentation layer is mostly used for integration. When integrating the presentation layer, the micro-frontend method is mostly used for integration.

[0003] However, the actual integration effect is not satisfactory. Especially when integrating the presentation layer, when a floating pop-up window appears on the page, the floating pop-up window will only display the pop-up window and the pop-up window mask within the range of the sub-application page, but the main application page cannot be masked, and the interactivity of the software system integration is relatively poor. Summary of the Invention

[0004] The present invention provides a method, device, equipment, medium and program product for displaying a pop-up window, which realizes the masked display of the pop-up window on the main application page and the sub-application page, and improves the interactivity of the software system integration.

[0005] According to one aspect of the present invention, there is provided a method for displaying a pop-up window, the method comprising:

[0006] When it is detected that a target page element corresponding to a pop-up window in a sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and pop-up window display data corresponding to the target page element from a presentation layer rendering container instance, and obtains a pop-up window display function from the presentation layer rendering container instance through a bridging event associated with a click function of the target page element;

[0007] Trigger the execution of the pop-up window display function, and based on the target page element, at least one sub-element associated with the target page element, and pop-up window display data corresponding to the target page element, perform pop-up window rendering on the main application page to realize the pop-up window display and pop-up window mask of the pop-up window on the main application page.

[0008] According to another aspect of the present invention, there is provided a device for displaying a pop-up window, the device comprising:

[0009] A main application data acquisition module, configured to, when it is detected that a target page element corresponding to a pop-up window in a sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and pop-up window display data corresponding to the target page element from a presentation layer rendering container instance, and obtains a pop-up window display function from the presentation layer rendering container instance through a bridging event associated with a click function of the target page element;

[0010] A pop-up display module, which is used to trigger the execution of the pop-up display function, and based on the target page element, at least one sub-element associated with the target page element, and the pop-up display data corresponding to the target page element, renders a pop-up window on the main application page, so as to implement the pop-up display and pop-up mask of the pop-up window on the main application page.

[0011] According to another aspect of the present invention, there is provided an electronic device, which includes:

[0012] At least one processor; and

[0013] A memory communicatively connected to the at least one processor; wherein,

[0014] The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor, so that the at least one processor can execute the pop-up display method according to any embodiment of the present invention.

[0015] According to another aspect of the present invention, there is provided a computer-readable storage medium, which stores computer instructions, and the computer instructions are used to implement the pop-up display method according to any embodiment of the present invention when executed by a processor.

[0016] According to another aspect of the present invention, there is provided a computer program product, which includes a computer program, and the computer program implements the pop-up display method according to any embodiment of the present invention when executed by a processor.

[0017] In the technical solution of the embodiment of the present invention, by pre - constructing a display - layer rendering container instance, the target page element, at least one sub - element associated with the target page element, the pop - up display data corresponding to the target page element, and the pop - up display function are pre - stored in the display - layer rendering container instance. By constructing a bridging event associated with the click function of the target page element, when it is detected that the target page element corresponding to the pop - up in the sub - application page is clicked, the main application obtains the target page element, at least one sub - element associated with the target page element, and the pop - up display data corresponding to the target page element from the display - layer rendering container instance. The main application obtains the pop - up display function from the display - layer rendering container instance through the bridging event associated with the click function of the target page element. The main application triggers the execution of the pop - up display function, and based on the target page element, at least one sub - element associated with the target page element, and the pop - up display data corresponding to the target page element, performs pop - up rendering on the main - application page. While the pop - up is displayed and masked in the sub - application page, the pop - up display and masking in the main - application page are realized, which can improve the interactivity of software system integration; in addition, without adding any page elements to the main - application page, the software development cost during software system integration can be reduced.

[0018] It should be understood that the content described in this part is not intended to identify the key or important features of the embodiments of the present invention, nor is it used to limit the scope of the present invention. Other features of the present invention will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the drawings in the following description are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings.

[0020] Figure 1 is a flowchart of a pop - up display method provided in Embodiment 1 of the present invention;

[0021] Figure 2 is a flowchart of a pop - up display method provided in Embodiment 2 of the present invention;

[0022] Figure 3 is a schematic structural diagram of a pop - up display device provided in Embodiment 3 of the present invention;

[0023] Figure 4 is a schematic structural diagram of an electronic device for implementing the pop - up display method of the embodiment of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0024] To enable those skilled in the art to better understand the solution of the present invention, the following will clearly and completely describe the technical solution in the embodiments of the present invention with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all of the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the scope of protection of the present invention.

[0025] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and do not necessarily need to describe a specific order or sequence. It should be understood that such used data can be interchanged under appropriate circumstances so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "comprising" and "having" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device comprising a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but may include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0026] Embodiment 1

[0027] Figure 1 It is a flowchart of a pop-up window display method provided for Embodiment 1 of the present invention. The embodiments of the present invention are applicable to the case of pop-up window masking display on the main application page. This method can be executed by a pop-up window display device, which can be implemented in the form of hardware and / or software, and the pop-up window display device can be configured in an electronic device carrying the pop-up window display function.

[0028] See Figure 1 The pop-up window display method shown includes:

[0029] S110. When it is detected that the target page element corresponding to the pop-up window in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up window display data corresponding to the target page element from the rendering container instance of the display layer, and obtains the pop-up window display function through the bridging event associated with the click function of the target page element.

[0030] Large software systems need to implement a wide variety of functions. By adopting the micro-frontend approach for presentation layer integration and integrating sub-applications (Sub-App) through the main application (Main-App), the function expansion of large software systems can be achieved. The main application page is the corresponding front-end page of the main application. The sub-application page is the corresponding front-end page of the sub-application. The main application page and the sub-application page can be two independent pages. The main application page has page elements that can jump to the sub-application page. Thus, by integrating at least one sub-application page through the main application page, the function integration of large software systems can be realized.

[0031] The pop-up window can be a floating pop-up window. Exemplarily, the pop-up window can be Modal box. Under the existing micro-frontend architecture, when triggering the display of a floating pop-up box on the sub-application page, the floating pop-up box only takes effect within the local container where it is integrated, that is, only within the display range of the sub-application page. At this time, the background mask of the pop-up box only covers the area of the sub-application page, and the area of the main application page can still perform page interactions, such as clicking or scrolling, etc. The area of the main application page is not blocked by the mask layer. As a result, the interactivity of large software systems is poor.

[0032] The target page element can be the page element corresponding to the pop-up box on the sub-application page. Exemplarily, the target page element can be a DOM (Document Object Model) element. The sub-element can be a lower-level element nested inside the target page element. Based on the sub-element and the page element, a hierarchical relationship of the target page element can be formed to achieve the display of the target page element.

[0033] The pop-up box display data can be used to display the pop-up box on the main application page. Exemplarily, the pop-up box display data can include the pop-up box display content and the pop-up box display style. Among them, the pop-up box display content can be the content required to be displayed in the pop-up box on the main application page. For example, the pop-up box display content can be an HTML (Hyper Text Markup Language) string. The pop-up box display style can be the format required to be displayed in the pop-up box on the main application page. For example, the pop-up box display format can be a CSS (Cascading Style Sheets) style.

[0034] The click function can be used to trigger the display of the pop-up box for the target page element. The click function can trigger the target page element corresponding to the pop-up box when clicked on the sub-application page. The pop-up box display function can be used to implement the display of the pop-up box on the main application page. The bridging event associated with the click function of the target page element can be used to obtain the pop-up box display function from the display layer rendering container instance in the main application when it is detected that the target page element corresponding to the pop-up box on the sub-application page is clicked, that is, when it is detected that the click function is executed on the target page element. Optionally, the target page element on the sub-application page, at least one sub-element associated with the target page element, the pop-up box display data corresponding to the target page element, and the pop-up box display function can be pre-obtained from the sub-application page and stored in the display layer rendering container instance.

[0035] The display layer rendering container instance can be used to store the target page element on the sub-application page, at least one sub-element associated with the target page element, the pop-up box display data corresponding to the target page element, and the pop-up box display function. Optionally, the display layer rendering container instance can also store all page functions including the pop-up box display function corresponding to the target page element.

[0036] Specifically, when the sub - application detects that the target page element corresponding to the pop - up window on the sub - application page is clicked, it sends the state of detecting that the target page element corresponding to the pop - up window on the sub - application page is clicked to the main application. When the main application receives that the target page element corresponding to the pop - up window on the sub - application page is clicked, it can obtain the target page element, at least one sub - element associated with the target page element, and the pop - up window display data corresponding to the target page element from the display layer rendering container instance. Through the bridging event associated with the click function of the target page element, the pop - up window display function is obtained from the display layer rendering container instance.

[0037] In an alternative embodiment of the present invention, before detecting that the page element corresponding to the pop - up window on the sub - application page is clicked, it further includes: when detecting that the routing address associated with the main - application page triggers an operation, performing a display detection operation on the routing address to obtain all page elements of the target page corresponding to the routing address; detecting whether there is a root element of the target type among all page elements to determine whether there is a display - layer integration behavior on the target page; when there is a display - layer integration behavior on the target page, constructing a display - layer rendering container instance and attaching all page elements of the target page to the display - layer rendering container instance; detecting whether the element style of each page element is the target style; when the element style of the page element is the target style, obtaining at least one sub - element associated with the page element and detecting whether each sub - element is bound with a click event; when the sub - element is bound with a click event, detecting whether the processing logic of the click event is to control the page element associated with the sub - element to be hidden; when the processing logic of the click event is to control the page element associated with the sub - element to be hidden, determining that the page element is the page element corresponding to the pop - up window; obtaining the pop - up window display data and the pop - up window display function of the page element corresponding to the pop - up window, and passing at least one sub - element associated with the page element corresponding to the pop - up window, the pop - up window display data of the page element corresponding to the pop - up window, and the pop - up window display function into the display - layer rendering container instance. At the same time, a bridging event is constructed for the click function of the page element corresponding to the pop - up window.

[0038] The routing address associated with the main - application page can be used to jump to the main - application page or a sub - application page associated with the main - application page. Optionally, when detecting that the user of the software system accesses the software system, a routing listener can be added to the main - application page to obtain all routing addresses of the main - application page and add listeners to each routing address of the main - application page. Among them, all routing addresses can include the routing address corresponding to the main - application page and at least one routing address corresponding to a sub - application page.

[0039] The routing address trigger operation can be used to trigger page elements on the main application page and jump to the page corresponding to the routing address. The target page can be the page corresponding to the routing address. Optionally, the target page can be the main application page or the sub-application page. All page elements can be all the page elements of the target page. The root element of the target type can be used to detect whether there is a presentation layer integration behavior on the target page, that is, to detect whether the target page is a sub-application page. Exemplarily, the root element of the target type can include an IFrame (Inline Frame) element or an HTML (Hyper Text Markup Language) element.

[0040] The existence of a presentation layer integration behavior on the target page can be used to characterize that the target page is a sub-application page. The presentation layer rendering container instance can be used to store all the page elements of the sub-application page, at least one sub-element associated with the page element, the pop-up display data corresponding to the page element, and the pop-up display function. The presentation layer rendering container instance can have a one-to-one correspondence with the sub-application page.

[0041] The element style can be the display style of the page element on the page. The target style can be the display style corresponding to the pop-up window. Exemplarily, the target style can be that the element style has a hidden state, the background color is the target color, and the background color has a transparency setting. Among them, the target color can be gray, black, or a color between gray and gray.

[0042] Binding a click event to a sub-element can be understood as that there is a sub-element triggered by a click operation among the sub-elements associated with the page element. Exemplarily, the sub-element can be an "OK" button element, a "Cancel" button element, or a "Close" button element, etc.

[0043] The processing logic of the click event is to control the page element associated with the sub-element to be hidden, which can be understood as that when a click operation is performed on the sub-element, the click event is executed, that is, the page element corresponding to the sub-element is controlled to be hidden. Referring to the above example, the sub-element can be a "Cancel" button or a "Close" button; the page element can be the page element corresponding to the pop-up window.

[0044] Before constructing a bridging event for the click function of the page element corresponding to the pop-up window, when the page element corresponding to the pop-up window is clicked in the sub-application page, only the pop-up window display and the pop-up window mask are implemented in the sub-application page. After constructing a bridging event for the click function of the page element corresponding to the pop-up window, the main application can perceive that the page element corresponding to the pop-up window is clicked, and can obtain the pop-up window display function when the page element corresponding to the pop-up window is clicked, and implement the pop-up window display and the pop-up window mask on the main application page. Thus, when the page element corresponding to the pop-up window is clicked, the pop-up window display and the pop-up window mask on the main application page and the sub-application page are implemented.

[0045] Specifically, it is possible to detect the triggering operation of the routing address associated with the main application page based on the pre-added monitoring of each routing address of the main application page. When detecting the triggering operation of the routing address associated with the main application page, it is possible to perform a display detection operation on the routing address based on the sandbox proxy to obtain all page elements of the target page corresponding to the routing address.

[0046] Specifically, it is possible to detect whether there is a root element of the target type among the page elements. When there is a root element of the target type in the page elements, it is determined that there is a presentation layer integration behavior on the target page; when there is no root element of the target type in the page elements, it is determined that there is no presentation layer integration behavior on the target page. When there is a presentation layer integration behavior on the target page, it is possible to construct an instance of the presentation layer rendering container and attach all page elements of the target page to the instance of the presentation layer rendering container.

[0047] Specifically, it is possible to detect whether the element style of each page element is the target style. When the element style of the page element is the target style, it is possible to obtain at least one child element associated with the page element based on the sandbox proxy, and it is possible to detect whether each child element is bound to a click event according to the characteristic values of each child element through an event listener. When a child element is bound to a click event, it is detected whether the processing logic of the click event is to control the hiding of the page element associated with the child element. When the processing logic of the click event is to control the hiding of the page element associated with the child element, it is determined that the page element is the page element corresponding to the pop-up window.

[0048] Exemplarily, detecting whether the element style of each page element is the target style may include: detecting whether there is a hidden state in the element style of each page element; when there is a hidden state in the element style of the page element, detecting whether the background color of the page element is the target color; when the background color of the page element is the target color, detecting whether there is a transparency setting for the background color of the page element; when there is a transparency setting for the background color of the page element, determining that the element style of the page element is the target style.

[0049] Specifically, it is possible to obtain the pop-up window display data and the pop-up window display function of the page element corresponding to the pop-up window based on the pre-added monitoring of the routing address where the target page is located, and pass at least one child element associated with the page element corresponding to the pop-up window, the pop-up window display data and the pop-up window display function corresponding to the page element corresponding to the pop-up window into the instance of the presentation layer rendering container. At the same time, it is possible to use a hierarchical bridging structure to construct a bridging event for the click function of the page element corresponding to the pop-up window.

[0050] When the operation triggered by the routing address associated with the main application page is detected, this solution performs display detection and operation on the routing address, obtains all page elements of the target page corresponding to the routing address, and realizes the preliminary detection of whether there is a display layer integration behavior on the target page by detecting whether there is a root element of the target type in the page elements. When there is a display layer integration behavior on the target page, by constructing an instance of the display layer rendering container, the pre-storage of all page elements of the sub-application page is realized; by sequentially detecting whether the element style of the page element is the target style, whether each sub-element associated with the page element is bound with a click event, and whether the processing logic of the click event is to control the hiding of the page elements associated with the sub-element, the filtering of the page elements corresponding to the pop-up window is realized; by passing at least one sub-element associated with the page element corresponding to the pop-up window, the pop-up window display data corresponding to the page element corresponding to the pop-up window, and the pop-up window display function into the instance of the display layer rendering container, the pre-storage of the required data for the pop-up window display in the sub-application page is realized. At the same time, by constructing a bridging event for the click function of the page element corresponding to the pop-up window, the pre-bridging of the click function of the page element corresponding to the pop-up window is realized, which is convenient for the main application to perceive the trigger of the page element corresponding to the pop-up window in the sub-application page, and provides a basis for the pop-up window display and pop-up window mask in the main application page.

[0051] In an optional embodiment of the present invention, when constructing an instance of the display layer rendering container, it further includes: extracting the eigenvalue of the routing address, and determining the container identifier of the display layer rendering container instance according to the routing address eigenvalue; storing the container identifier and the instance of the display layer rendering container correspondingly; correspondingly, when it is detected that the target page element corresponding to the pop-up window in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up window display data corresponding to the target page element from the instance of the display layer rendering container, including: when it is detected that the target page element corresponding to the pop-up window in the sub-application page is clicked, the main application obtains the container identifier of the display layer rendering container instance where the target page element is located; the main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up window display data corresponding to the target page element from the corresponding instance of the display layer rendering container according to the container identifier.

[0052] The routing address eigenvalue can be used to uniquely identify the routing address, that is, to uniquely identify the page corresponding to the routing address. The container identifier can be used to uniquely identify the instance of the display layer rendering container. The container identifier can realize the one-to-one correspondence between the routing address and the instance of the display layer rendering container.

[0053] Specifically, when constructing an instance of the display layer rendering container, the routing address can be parsed to extract the routing address eigenvalue.

[0054] Optionally, the routing address feature value can be directly determined as the container identifier of the presentation layer rendering container instance. Optionally, the routing address feature value can be further processed, for example, combined with other information, to generate the container identifier of the presentation layer rendering container instance.

[0055] Specifically, the container identifier and the presentation layer rendering container instance can be correspondingly stored in the presentation layer integration manager, and / or the container identifier can be shared to the presentation layer rendering container instance.

[0056] Specifically, the monitoring pre-added to the sub-application page is sent to the main application when it is detected that the target page element corresponding to the pop-up window in the sub-application page is clicked. The main application can obtain the container identifier of the presentation layer rendering container instance where the target page element is located from the presentation layer integration manager or the presentation layer rendering container instance. Based on the container identifier, the main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up window display data corresponding to the target page element from the corresponding presentation layer rendering container instance.

[0057] In this solution, by extracting the feature value from the routing address and generating the container identifier of the presentation layer rendering container instance based on the routing address feature value, and correspondingly storing the container identifier and the presentation layer rendering container instance, a one-to-one correspondence between the routing address and the presentation layer rendering container instance is achieved; when it is detected that the target page element corresponding to the pop-up window in the sub-application page is clicked, the main application obtains the container identifier of the presentation layer rendering container instance where the target page element is located, and based on the container identifier, obtains the target page element, at least one sub-element associated with the target page element, and the pop-up window display data corresponding to the target page element from the corresponding presentation layer rendering container instance. By introducing the container identifier, the quick screening and confirmation of the presentation layer rendering container instance are realized, and the efficiency of pop-up window display is improved.

[0058] S120. Trigger the execution of the pop-up window display function, and based on the target page element, at least one sub-element associated with the target page element, and the pop-up window display data corresponding to the target page element, perform pop-up window rendering on the main application page to achieve the pop-up window display and pop-up window mask in the main application page.

[0059] Specifically, the main application can trigger the execution of the pop-up window display function, and use the pop-up window display content and pop-up window display style in the target page element, at least one sub-element associated with the target page element, and the pop-up window display data corresponding to the target page element to perform pop-up window rendering on the main application page, so as to achieve the pop-up window display and pop-up window mask in the main application page.

[0060] In the technical solution of the embodiment of the present invention, by pre-constructing a display layer rendering container instance, the target page element, at least one sub-element associated with the target page element, the pop-up window display data corresponding to the target page element, and the pop-up window display function are pre-stored in the display layer rendering container instance. By constructing a bridging event associated with the click function of the target page element, when it is detected that the target page element corresponding to the pop-up window in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up window display data corresponding to the target page element from the display layer rendering container instance. The main application obtains the pop-up window display function from the display layer rendering container instance through the bridging event associated with the click function of the target page element, and the main application triggers the execution of the pop-up window display function. Based on the target page element, at least one sub-element associated with the target page element, and the pop-up window display data corresponding to the target page element, a pop-up window is rendered on the main application page. While the pop-up window is displayed and masked on the sub-application page, the pop-up window is displayed and masked on the main application page, which can improve the interactivity of software system integration; in addition, there is no need to add any page elements to the main application page, which can reduce the software development cost during software system integration.

[0061] Embodiment 2

[0062] Figure 2 It is a flowchart of a pop-up window display method provided by the second embodiment of the present invention. On the basis of the above embodiment, after "rendering the pop-up window on the main application page", the second embodiment of the present invention further adds that "when it is detected that the target sub-element of the target page element corresponding to the pop-up window is triggered, the main application obtains the key-value pairs of the triggered target page element and each sub-element associated with the target page element from the display layer rendering container instance, and obtains other page functions through the bridging event associated with the trigger function of the sub-element of the page element; calls the target sub-element of the triggered target page element in the display layer rendering container instance as the key object corresponding to the main application page; according to the key-value pairs of the key object, triggers the execution of other page functions to assign values to the pop-up window on the main application page, and completes the interaction linkage of the pop-up window on the main application page and the sub-application page", realizing the interactive linkage of the pop-up window on the main application page and the sub-application page. It should be noted that for the parts not detailed in the embodiments of the present invention, reference can be made to the descriptions of other embodiments.

[0063] See Figure 2 The pop-up window display method shown includes:

[0064] S210. When it is detected that the target page element corresponding to the pop-up box on the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up box display data corresponding to the target page element from the display layer rendering container instance, and obtains the pop-up box display function through the bridging event associated with the click function of the target page element.

[0065] S220. Trigger the execution of the pop-up box display function, and based on the target page element, at least one sub-element associated with the target page element, and the pop-up box display data corresponding to the target page element, perform pop-up box rendering on the main application page to implement the pop-up box display and pop-up box mask in the main application page.

[0066] S230. When it is detected that the target sub-element of the target page element corresponding to the pop-up box is triggered, the main application obtains the key-value pairs of the triggered target page element and each sub-element associated with the target page element from the display layer rendering container instance, and obtains other page functions through the bridging event associated with the trigger function of the target sub-element of the target page element.

[0067] The main application can execute the pop-up box display function through the bridging event, thereby implementing pop-up box rendering and pop-up box mask on one end of the main application page. However, the page element corresponding to the pop-up box also has other page functions for implementing other pop-up box interaction functions besides pop-up box display. For example, after the pop-up box is opened on the main application page and the sub-application page, it will also involve changes in the pop-up box content on the main application page and the sub-application page. Currently, it can only be implemented on the sub-application page side and cannot be implemented on the main application page side.

[0068] The target sub-element can be the sub-element triggered in the target page element corresponding to the pop-up box. It can be understood that the target sub-element can be the sub-element that causes pop-up box interaction (such as pop-up box content change) on the main application page and the sub-application page. The key-value pairs of the sub-elements associated with the target page element can be used to characterize the target sub-element that triggers the target page element corresponding to the pop-up box and the interaction operations (such as obtaining the changed pop-up box content) on the main application page and the sub-application page when the target sub-element is triggered.

[0069] The trigger function of the target sub-element of the target page element can be used to trigger the target sub-element to implement pop-up box interaction (such as pop-up box content change). Optionally, the trigger function can execute to trigger the target sub-element of the target page element corresponding to the pop-up box in the sub-application page. Other page functions can be used to implement pop-up box interaction (such as pop-up box content change) on the main application page. The bridging event associated with the trigger function of the target sub-element of the target page element can be used for the main application to obtain other page functions from the display layer rendering container instance when it is detected that the target sub-element of the target page element corresponding to the pop-up box in the sub-application page is triggered.

[0070] Specifically, when the sub-application detects that the target sub-element of the target page element corresponding to the pop-up window is triggered, it sends the state of the trigger of the target sub-element of the target page element corresponding to the pop-up window to the main application. When the main application receives the trigger of the target sub-element of the target page element corresponding to the pop-up window, it can obtain the key-value pairs of the triggered target page element and each sub-element associated with the target page element from the display layer rendering container instance. Through the bridging event associated with the trigger function of the target sub-element of the target page element, other page functions are obtained from the display layer rendering container instance.

[0071] In an optional embodiment of the present invention, when passing the pop-up window display data and the pop-up window display function corresponding to the page element into the display layer rendering container instance, it further includes: obtaining all page functions of the page element corresponding to the pop-up window; passing the other page functions except the pop-up window display function in all page functions of the page element corresponding to the pop-up window into the display layer rendering container instance; constructing a bridging event for the trigger function of the sub-element of the page element corresponding to the pop-up window.

[0072] All page functions can be all page functions executable by triggering the page element. All page functions can be used to implement all functions corresponding to the pop-up window. Other page functions can be page functions except the pop-up window display function. A bridging event is constructed for the trigger function of the sub-element of the page element, whereby the main application can sense that the sub-element of the page element is triggered, and when the sub-element of the page element is triggered, the main application can obtain other page functions to implement the pop-up window interaction of the main application page (such as implementing the change of the pop-up window content).

[0073] Specifically, all page functions of the page element corresponding to the pop-up window can be obtained based on the pre-added monitoring of the routing address where the target page is located. The other page functions except the pop-up window display function in all page functions of the page element corresponding to the pop-up window can be passed into the display layer rendering container instance. At the same time, a hierarchical bridging structure can be adopted to construct a bridging event for the trigger function of the sub-element of the page element corresponding to the pop-up window.

[0074] This solution realizes the pre-storage of all page functions in the sub-application page by passing the other page functions except the pop-up window display function in all page functions of the page element corresponding to the pop-up window into the display layer rendering container instance. At the same time, by constructing a bridging event for the trigger function of the sub-element of the page element corresponding to the pop-up window, the pre-bridging of the trigger function of the sub-element of the page element corresponding to the pop-up window is realized, which is convenient for the main application to sense the trigger of the sub-element of the page element corresponding to the pop-up window in the sub-application page and provides a basis for the pop-up window interaction of the main application page.

[0075] S240. Call the target child element of the target page element triggered in the rendering container instance of the presentation layer as the key object corresponding to the main application page.

[0076] The key object corresponding to the main application page can be used to uniquely identify the triggering object when there is a pop-up interaction (such as a change in the pop-up content) on the main application page. The key object corresponding to the main application page can be the target child element.

[0077] Specifically, the main application can call the target child element of the target page element triggered in the rendering container instance of the presentation layer as the key object corresponding to the main application page.

[0078] S250. Trigger the execution of other page functions, and assign values to the pop-up window on the main application page according to the key-value pairs of the key object, so as to complete the interaction linkage of the pop-up window between the main application page and the sub-application page.

[0079] The key-value pairs of the key object can be used to represent the triggered key object and the pop-up interaction actions (such as the changed pop-up content) executed on the main application page and the sub-application page when the key object is triggered. Assigning values to the pop-up window on the main application page can be understood as implementing pop-up interaction actions (such as a change in the pop-up content) on the main application page.

[0080] Specifically, when the main application triggers the execution of other page functions, it can assign values to the pop-up window on the main application page according to the key-value pairs of the key object, so as to complete the interaction linkage of the pop-up window between the main application page and the sub-application page.

[0081] The technical solution of the embodiment of the present invention is as follows: when it is detected that the target child element of the target page element corresponding to the pop-up window is triggered, the main application obtains the key-value pairs of the triggered target page element and each child element associated with the target page element from the rendering container instance of the presentation layer, and obtains other page functions through the bridging event associated with the trigger function of the child element of the page element. Call the target child element of the target page element triggered in the rendering container instance of the presentation layer as the key object corresponding to the main application page, and trigger the execution of other page functions according to the key-value pairs of the key object, and assign values to the pop-up window on the main application page, realizing the interaction linkage of the pop-up window between the main application page and the sub-application page.

[0082] In an optional embodiment of the present invention, when triggering the execution of other page functions, it further includes: detecting whether the other page function is a pop-up window hiding function; when the other page function is a pop-up window hiding function, the main application obtains the pop-up window hiding function and the pop-up window display style of the main application page, and hides the pop-up window on the main application page, so as to realize the hiding of the pop-up window on the main application page.

[0083] When executing other page functions of the target page element, the key-value pairs of each sub-element associated with the target page element in the sub-application page obtained in advance can be used to implement the pop-up interaction with the main application page (for example, to implement the change of the pop-up content). In comparison, other page functions except the pop-up hiding function are triggered at the sub-application page end, causing the change of the pop-up content in both the sub-application page and the main application page. However, the pop-up hiding function may be triggered at the main application page end. Due to the relevance of the pop-up hiding function, it can only cause the pop-up in the sub-application page to be hidden, but cannot implement the hiding of the pop-up in the main application page. The pop-up hiding function and the pop-up hiding style of the main application page can be used to hide the pop-up in the main application page.

[0084] Specifically, the main application can detect whether other page functions are pop-up hiding functions. When other page functions are pop-up hiding functions, the main application can obtain the pop-up hiding function and the pop-up display style of the main application page to hide the pop-up in the main application page, so as to implement the hiding of the pop-up in the main application page.

[0085] In this solution, while triggering the execution of other page functions, when other page functions are pop-up hiding functions, the main application obtains the pop-up hiding function and the pop-up display style of the main application page to hide the pop-up in the main application page, realizing the hiding of the pop-up in both the main application page and the sub-application page. Thus, a closed-loop operation of the pop-up's popping, interaction, and hiding in both the main application page and the sub-application page is achieved.

[0086] Based on the above embodiments, the present invention also provides a preferred embodiment. The pop-up display method includes:

[0087] Step 1: When detecting the access to the software system, add a route listener to the main application page, obtain all the route addresses of the main application page, and add listeners to each route address.

[0088] Among them, all the route addresses include the route address corresponding to the main application and at least one route address corresponding to a sub-application.

[0089] Step 2: When detecting the triggering operation of the route address associated with the main application page, perform a display detection operation on the route address to obtain all the page elements of the target page corresponding to the route address.

[0090] Among them, the page element is a DOM element. The purpose of performing a display detection operation on the route address is to detect whether the route address corresponds to the main application page or the sub-application page.

[0091] Step 3: Detect whether there is a root element of the target type among each page element to determine whether there is a display layer integration behavior in the target page.

[0092] Among them, the root element of the target type may include an IFrame (Inline Frame) element or an HTML (Hyper Text Markup Language) element. Determining whether there is a presentation layer integration behavior on the target page can be understood as determining that the target page is a sub-application page.

[0093] Step 4: When there is a presentation layer integration behavior on the target page, construct an instance of the presentation layer rendering container, and attach all page elements of the target page to the instance of the presentation layer rendering container.

[0094] Step 5: Extract the eigenvalue of the routing address, and use the routing address eigenvalue as the container identifier of the presentation layer rendering container instance.

[0095] Step 6: Store the container identifier and the presentation layer rendering container instance in the presentation layer integration manager correspondingly. At the same time, share the container identifier to the presentation layer rendering container instance.

[0096] Use the presentation layer integration manager to manage the correspondence between the container identifier and the rendering container instance, that is, to correspond the routing address and the presentation layer rendering container instance. Share the container identifier to the presentation layer rendering container instance so that the presentation layer rendering container instance knows its own container identifier. The only container identifier stored inside the presentation layer rendering container instance can serve two purposes: one is to identify the presentation layer rendering container instance itself, and the other is to identify the corresponding routing address, ultimately realizing the binding between the routing address with the presentation layer integration behavior and the constructed presentation layer rendering container instance.

[0097] Step 7: While attaching all page elements of the target page to the presentation layer rendering container instance, obtain all page elements of the target page and their corresponding child elements, and detect whether the element style of each page element has a hidden state; when the element style of the page element has a hidden state, detect whether the background color of the page element is a color between black and gray and has a transparency setting; when the background color of the page element is a color between black and gray and has a transparency setting, obtain the eigenvalues of all child elements associated with the page element, and detect whether each child element is bound with a click event; when the child element is bound with a click event, detect whether the processing logic of the click event is to control the hidden state of the page element associated with the child element; when the processing logic of the click event is to control the hidden state of the page element associated with the child element, determine that the page element is the page element corresponding to the pop-up window.

[0098] Step 8: Obtain the pop-up display data and all page functions of the page elements corresponding to the pop-up window, and pass all the child elements associated with the page elements corresponding to the pop-up window, the pop-up display data of the page elements corresponding to the pop-up window, and all page functions into the rendering container instance of the presentation layer. At the same time, construct a bridging event for the click function of the page elements corresponding to the pop-up window.

[0099] Step 9: Detect the business logic of all page functions of the page elements corresponding to the pop-up window; when the business logic of the page function is to initialize and assign values to the page elements, obtain the pop-up display function.

[0100] All page functions of the page elements corresponding to the pop-up window may include a pop-up display function, a pop-up interaction function, a pop-up hiding function, etc. Among them, the pop-up display function can initialize and assign values to the pop-up window when the pop-up window is displayed.

[0101] Step 10: When it is detected that the target page element corresponding to the pop-up window in the sub-application page is clicked, trigger the execution of the bridging event of the click function, that is, the main application queries the container identifier of the rendering container instance based on the rendering container instance where the target page element is located, and according to the container identifier, obtains the target page element, at least one child element associated with the target page element, the pop-up display data corresponding to the target page element, and the pop-up display function from the corresponding rendering container instance of the presentation layer.

[0102] Exemplarily, the pop-up display data may include the pop-up display content and the pop-up display style. Among them, the pop-up display content may be the content required to be displayed in the pop-up window on the main application page. Exemplarily, the pop-up display content may be an HTML (Hyper Text Markup Language) string. The pop-up display style may be the format required to be displayed in the pop-up window on the main application page. Exemplarily, the pop-up display format may be a CSS (Cascading Style Sheets) style.

[0103] Step 11: Trigger the execution of the pop-up display function, and through the pop-up display function, render the pop-up window on the main application page based on the pop-up display style and the pop-up display data, so as to realize the masked display of the pop-up window on the main application page and the sub-application page.

[0104] Step 12: While rendering the pop-up window on the main application page, obtain other page functions bound to the page elements corresponding to the pop-up window from the rendering container instance of the presentation layer; pass the other page functions of the page elements corresponding to the pop-up window into the rendering container instance of the presentation layer; construct a bridging event for the trigger function of the child elements of the page elements corresponding to the pop-up window.

[0105] Exemplarily, other page functions may include test functions, and the identifiers of the test functions may include "test 1" and "test 2".

[0106] Step 13: When it is detected that the target sub-element of the target page element corresponding to the pop-up box is triggered, the main application obtains the key-value pairs of the triggered target page element and each sub-element associated with the target page element from the presentation layer rendering container instance, and obtains other page functions through the bridge event associated with the trigger function of the target sub-element of the target page element.

[0107] Step 14: Call the target child element of the triggered target page element in the presentation layer rendering container instance as the key object corresponding to the main application page.

[0108] Step 15: trigger the execution of other page functions, assign values to the pop-up boxes in the main application page according to the key-value pairs of the key objects, and complete the linkage changes of the pop-up boxes in the main application page and the sub-application page.

[0109] Step 16: While triggering the execution of other page functions, detect whether the other page functions are pop-up hiding functions; when the other page functions are pop-up hiding functions, the main application obtains the pop-up hiding function and pop-up display style of the main application page, and hides the pop-up of the main application page to achieve pop-up hiding of the pop-up on the main application page.

[0110] This solution completes the closed-loop operation of pop-up, pop-up mask, pop-up interaction and pop-up hiding of the main application page and the sub-application page, improving the page interactivity of the software system.

[0111] Embodiment 3

[0112] Figure 3 A schematic diagram of the structure of a pop-up box display device provided in Embodiment 3 of the present invention. The embodiment of the present invention can be applied to the case where a pop-up box mask is displayed on the main application page. The device can execute the pop-up box display method. The device can be implemented in the form of hardware and / or software. The device can be configured in an electronic device that carries the pop-up box display function.

[0113] See also Figure 3 The pop-up display device shown includes: a main application data acquisition module 310 and a main application pop-up display module 320. Among them, the main application data acquisition module 310 is used to, when it detects that a target page element corresponding to a pop-up window in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and pop-up display data corresponding to the target page element from the display layer rendering container instance, and obtains a pop-up display function from the display layer rendering container instance through a bridging event associated with the click function of the target page element; the main application pop-up display module 320 is used to trigger the execution of the pop-up display function, and based on the target page element, at least one sub-element associated with the target page element, and pop-up display data corresponding to the target page element, perform pop-up window rendering on the main application page to achieve pop-up display and pop-up window masking of the pop-up window in the main application page.

[0114] The technical solution of the embodiment of the present invention, by pre-constructing a display layer rendering container instance, pre-stores the target page element, at least one sub-element associated with the target page element, pop-up display data corresponding to the target page element, and a pop-up display function into the display layer rendering container instance, and by constructing a bridging event associated with the click function of the target page element, when it detects that a target page element corresponding to a pop-up window in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and pop-up display data corresponding to the target page element from the display layer rendering container instance, the main application obtains a pop-up display function from the display layer rendering container instance through a bridging event associated with the click function of the target page element, the main application triggers the execution of the pop-up display function, and based on the target page element, at least one sub-element associated with the target page element, and pop-up display data corresponding to the target page element, performs pop-up window rendering on the main application page. While the pop-up window is displayed and masked in the sub-application page, the pop-up display and pop-up window masking of the pop-up window in the main application page are realized, which can improve the interactivity of software system integration; in addition, there is no need to add any page elements to the main application page, which can reduce the software development cost during software system integration.

[0115] In an alternative embodiment of the present invention, the device further includes: an other page function acquisition module, configured to, after rendering a pop-up box on the main application page, when it is detected that a target sub-element of the target page element corresponding to the pop-up box is triggered, the main application obtains key-value pairs of the triggered target page element and each sub-element associated with the target page element from the display layer rendering container instance, and obtains other page functions through a bridging event associated with a trigger function of the target sub-element of the target page element; an other page function determination module, configured to call the target sub-element of the target page element triggered in the display layer rendering container instance as a key object corresponding to the main application page; a main application pop-up box linkage module, configured to trigger the execution of the other page functions, trigger the execution of the other page functions, assign values to the pop-up box on the main application page, and complete the linkage of the pop-up box between the main application page and the sub-application page.

[0116] In an alternative embodiment of the present invention, the device further includes: a pop-up box hiding function detection module, configured to, while triggering the execution of the other page functions, detect whether the other page functions are pop-up box hiding functions; a main application pop-up box hiding module, configured to, when the other page functions are pop-up box hiding functions, the main application obtains the pop-up box hiding function and the pop-up box display style of the main application page, and hides the pop-up box on the main application page to implement the pop-up box hiding on the main application page.

[0117] In an alternative embodiment of the present invention, the device further includes: a routing address detection module, configured to perform a display detection operation on a routing address when a routing address trigger operation associated with a main application page is detected before a page element corresponding to a pop-up window in a sub-application page is clicked, and obtain all page elements of a target page corresponding to the routing address; a display layer integration behavior determination module, configured to detect whether there is a root element of a target type among the page elements, and determine whether there is a display layer integration behavior on the target page; a display layer rendering container instance construction module, configured to construct a display layer rendering container instance when there is a display layer integration behavior on the target page, and attach all page elements of the target page to the display layer rendering container instance; an element style detection module, configured to detect whether the element style of each page element is a target style; a click event binding detection module, configured to obtain at least one sub-element associated with the page element and detect whether each sub-element is bound with a click event when the element style of the page element is a target style; a click event logic detection module, configured to detect whether the processing logic of the click event is to control the hiding of the page element associated with the sub-element when the sub-element is bound with the click event; a pop-up window page element determination module, configured to determine that the page element is a page element corresponding to a pop-up window when the processing logic of the click event is to control the hiding of the page element associated with the sub-element; a click function construction bridging event module, configured to obtain the pop-up window display data and the pop-up window display function of the page element corresponding to the pop-up window, and pass at least one sub-element associated with the page element corresponding to the pop-up window, the pop-up window display data and the pop-up window display function of the page element corresponding to the pop-up window into the display layer rendering container instance, and at the same time, construct a bridging event for the click function of the page element corresponding to the pop-up window.

[0118] In an alternative embodiment of the present invention, the device further includes: an all page function acquisition module, configured to acquire all page functions of the page element corresponding to the pop-up window while passing the pop-up window display data and the pop-up window display function of the page element corresponding to the pop-up window into the display layer rendering container instance; an other page function passing module, configured to pass other page functions of the page element except the pop-up window display function into the display layer rendering container instance; a trigger function construction bridging event module, configured to construct a bridging event for the trigger function of the sub-element of the page element corresponding to the pop-up window.

[0119] In an alternative embodiment of the present invention, the device further includes: a container identifier determination module, configured to extract eigenvalue of the routing address while rendering the container instance in the build display layer, and determine the container identifier of the container instance rendered in the display layer according to the routing address eigenvalue; a container identifier corresponding storage module, configured to store the container identifier and the container instance rendered in the display layer in a corresponding manner; correspondingly, the main application data acquisition module 310 includes: a container identifier acquisition unit, configured to, when detecting that a target page element corresponding to a pop-up window in the sub-application page is clicked, the main application acquires the container identifier of the container instance rendered in the display layer where the target page element is located; a main application data acquisition unit, configured to the main application acquires the target page element, at least one sub-element associated with the target page element, and the pop-up window display data corresponding to the target page element from the corresponding container instance rendered in the display layer according to the container identifier.

[0120] The pop-up window display device provided by the embodiments of the present invention can execute the pop-up window display method provided by any embodiment of the present invention, and has function modules and beneficial effects corresponding to the execution of the method.

[0121] In the technical solution of the embodiments of the present invention, the acquisition, storage, and application of the target page element, at least one sub-element associated with the target page element, the pop-up window display data corresponding to the target page element, the pop-up window display function, the target page element, the key-value pairs of each sub-element associated with the target page element, other page functions, the pop-up window hiding function of the main application page, the pop-up window display style, all page elements of the target page corresponding to the routing address, and at least one sub-element associated with the page element, etc., all comply with the provisions of relevant laws and regulations and do not violate public order and good customs.

[0122] Embodiment 4

[0123] Figure 4 FIG. shows a schematic structural diagram of an electronic device 400 that can be used to implement the embodiments of the present invention. The electronic device is intended to represent various forms of digital computers, such as, laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframes, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as, personal digital processing, cellular phones, smart phones, wearable devices (such as helmets, glasses, watches, etc.) and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present invention described and / or claimed herein.

[0124] As Figure 4 As shown, the electronic device 400 includes at least one processor 401 and a memory communicatively connected to the at least one processor 401, such as a read-only memory (ROM) 402, a random access memory (RAM) 403, etc. The memory stores a computer program executable by the at least one processor. The processor 401 can perform various appropriate actions and processes according to the computer program stored in the read-only memory (ROM) 402 or the computer program loaded from the storage unit 408 into the random access memory (RAM) 403. In the RAM 403, various programs and data required for the operation of the electronic device 400 can also be stored. The processor 401, the ROM 402, and the RAM 403 are connected to each other via a bus 404. An input / output (I / O) interface 405 is also connected to the bus 404.

[0125] Multiple components in the electronic device 400 are connected to the I / O interface 405, including: an input unit 406, such as a keyboard, a mouse, etc.; an output unit 407, such as various types of displays, speakers, etc.; a storage unit 408, such as a magnetic disk, an optical disc, etc.; and a communication unit 409, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 409 allows the electronic device 400 to exchange information / data with other devices via a computer network such as the Internet and / or various telecommunication networks.

[0126] The processor 401 can be various general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the processor 401 include but are not limited to a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any appropriate processor, controller, microcontroller, etc. The processor 401 executes the various methods and processes described above, such as the pop-up display method.

[0127] In some embodiments, the pop-up display method can be implemented as a computer program tangibly embodied in a computer-readable storage medium, such as the storage unit 408. In some embodiments, part or all of the computer program can be loaded and / or installed onto the electronic device 400 via the ROM 402 and / or the communication unit 409. When the computer program is loaded into the RAM 403 and executed by the processor 401, one or more steps of the pop-up display method described above can be executed. Alternatively, in other embodiments, the processor 401 can be configured to execute the pop-up display method by any other appropriate means (e.g., by means of firmware).

[0128] The various embodiments of the systems and techniques described above in this specification can be implemented in digital electronic circuitry, integrated circuit systems, field programmable gate arrays (FPGA), application specific integrated circuits (ASIC), application specific standard products (ASSP), systems on chip (SOC), complex programmable logic devices (CPLD), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include: being implemented in one or more computer programs that are executable and / or interpretable on a programmable system including at least one programmable processor, which may be a special-purpose or general-purpose programmable processor that receives data and instructions from, and transmits data and instructions to, a storage system, at least one input device, and at least one output device.

[0129] The computer programs for implementing the methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the computer programs, when executed by the processor, cause the functions / operations specified in the flowchart and / or block diagram to be implemented. The computer programs may be executed entirely on the machine, partly on the machine, as a stand-alone software package partly on the machine and partly on a remote machine or entirely on the remote machine or server.

[0130] In the context of the present invention, a computer-readable storage medium may be a tangible medium that can contain, or store a computer program for use by or in connection with an instruction execution system, apparatus, or device. The computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. Alternatively, the computer-readable storage medium may be a machine-readable signal medium. More specific examples of the machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, 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 disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0131] To provide interaction with a user, the systems and techniques described herein can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and a pointing device (e.g., a mouse or a trackball) through which the user can provide input to the electronic device. Other kinds of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).

[0132] The systems and techniques described herein can be implemented in a computing system including backend components (e.g., as a data server), or a computing system including middleware components (e.g., an application server), or a computing system including frontend components (e.g., a user computer having a graphical user interface or a web browser through which the user can interact with an implementation of the systems and techniques described herein), or a computing system including any combination of such backend components, middleware components, or frontend components. The components of the system can be interconnected to each other by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local area network (LAN), wide area network (WAN), blockchain network, and the Internet.

[0133] The computing system can include a client and a server. The client and the server are generally remote from each other and typically interact through a communication network. The relationship between the client and the server is created by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, also known as a cloud computing server or a cloud host, which is a host product in the cloud computing service system and solves the defects of difficult management and weak business scalability existing in traditional physical hosts and VPS (Virtual Private Server) services.

[0134] It should be understood that the various forms of processes shown above can be used, with steps reordered, added, or deleted. For example, the steps recited in the present invention can be executed in parallel, sequentially, or in a different order, as long as the desired results of the technical solution of the present invention can be achieved, and no limitation is made herein.

[0135] The above specific embodiments do not constitute a limitation to the protection scope of the present invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principle of the present invention shall be included within the protection scope of the present invention.

Claims

1. A pop-up display method, characterized in that, The method includes: When it is detected that a target page element corresponding to a pop-up box in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and pop-up box display data corresponding to the target page element from the display layer rendering container instance, and obtains a pop-up box display function from the display layer rendering container instance through a bridging event associated with the click function of the target page element; Trigger the execution of the pop-up box display function, and based on the target page element, at least one sub-element associated with the target page element, and pop-up box display data corresponding to the target page element, perform pop-up box rendering on the main application page to implement pop-up box display and pop-up box masking of the pop-up box in the main application page.

2. The pop-up window display method according to claim 1, wherein After performing pop-up box rendering on the main application page, it further includes: When it is detected that a target sub-element of the target page element corresponding to the pop-up box is triggered, the main application obtains key-value pairs of the triggered target page element and each sub-element associated with the target page element from the display layer rendering container instance, and obtains other page functions through a bridging event associated with the trigger function of the target sub-element of the target page element; Call the target sub-element of the target page element triggered in the display layer rendering container instance as the key object corresponding to the main application page; Trigger the execution of the other page functions, and assign values to the pop-up box in the main application page according to the key-value pairs of the key object to complete the linkage between the pop-up box in the main application page and the sub-application page.

3. The pop-up display method according to claim 2, wherein At the same time as triggering the execution of the other page functions, it further includes: Detect whether the other page function is a pop-up box hiding function; When the other page function is a pop-up box hiding function, the main application obtains the pop-up box hiding function and pop-up box display style of the main application page, and hides the pop-up box on the main application page to implement pop-up box hiding of the pop-up box in the main application page.

4. The pop-up display method according to claim 1 or 2, wherein Before it is detected that a page element corresponding to a pop-up box in the sub-application page is clicked, it further includes: When it is detected that a trigger operation is performed on a routing address associated with the main application page, perform display detection operation on the routing address to obtain all page elements of the target page corresponding to the routing address; Detect whether there is a root element of a target type among the page elements to determine whether there is a display layer integration behavior in the target page; When there is a display layer integration behavior in the target page, construct a display layer rendering container instance, and attach all page elements of the target page to the display layer rendering container instance; Detect whether the element style of each page element is a target style; When the element style of the page element is a target style, obtain at least one sub-element associated with the page element, and detect whether each sub-element is bound with a click event; When the sub-element is bound with a click event, detect whether the processing logic of the click event is to control the page element associated with the sub-element to be hidden; When the processing logic of the click event is to control the page element associated with the sub-element to be hidden, determine that the page element is the page element corresponding to the pop-up box; Obtain the pop-up display data and pop-up display function of the page element corresponding to the pop-up window, and pass at least one sub-element associated with the page element corresponding to the pop-up window, the pop-up display data of the page element corresponding to the pop-up window, and the pop-up display function into the display layer rendering container instance. At the same time, construct a bridging event for the click function of the page element corresponding to the pop-up window.

5. The pop-up display method according to claim 4, wherein When passing the pop-up display data and pop-up display function of the page element corresponding to the pop-up window into the display layer rendering container instance, it further includes: Obtain all the page functions of the page element corresponding to the pop-up window; Pass other page functions except the pop-up display function in all the page functions of the page element corresponding to the pop-up window into the display layer rendering container instance; Construct a bridging event for the trigger function of the sub-element of the page element corresponding to the pop-up window.

6. The pop-up display method according to claim 4, wherein When constructing the display layer rendering container instance, it further includes: Extract the eigenvalue of the routing address, and determine the container identifier of the display layer rendering container instance according to the routing address eigenvalue; Correspondingly store the container identifier and the display layer rendering container instance; Correspondingly, when it is detected that the target page element corresponding to the pop-up window in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up display data corresponding to the target page element from the display layer rendering container instance, including: When it is detected that the target page element corresponding to the pop-up window in the sub-application page is clicked, the main application obtains the container identifier of the display layer rendering container instance where the target page element is located; The main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up display data corresponding to the target page element from the corresponding display layer rendering container instance according to the container identifier.

7. A pop-up display device, characterized in that, The device includes: A main application data acquisition module, configured to, when it is detected that the target page element corresponding to the pop-up window in the sub-application page is clicked, the main application obtains the target page element, at least one sub-element associated with the target page element, and the pop-up display data corresponding to the target page element from the display layer rendering container instance, and obtains the pop-up display function from the display layer rendering container instance through the bridging event associated with the click function of the target page element; A main application pop-up display module, configured to trigger the execution of the pop-up display function, and perform pop-up rendering on the main application page based on the target page element, at least one sub-element associated with the target page element, and the pop-up display data corresponding to the target page element, so as to implement the pop-up display and pop-up mask of the pop-up window in the main application page.

8. An electronic device, characterized in that, The electronic device includes: At least one processor; and A memory communicatively connected to the at least one processor; wherein, The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor, so that the at least one processor can execute the pop-up display method according to any one of claims 1-6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for implementing the pop-up display method according to any one of claims 1-6 when the computer instructions are executed by a processor.

10. A computer program product, characterized in that, The computer program product includes a computer program that implements the pop-up display method according to any one of claims 1-6 when the computer program is executed by a processor.

Images