How to solve the problem of occlusion in vue multi-layer pop-up frame

This article introduces the knowledge of "how to solve the problem of occlusion in vue multi-layer pop-up box". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Question:

As shown in the picture above, when there is a multi-layer pop-up box, click on the red content in the yellow box, and when the blue box pops up, the above situation occurs, that is, the top-level pop-up box is obscured, and the occlusion disappears when we click on the blue box. The following will put forward the corresponding solution to this problem.

Solution:

I solve the idea, the first thing I think of is to find the css tag of the corresponding occlusion layer, and then modify the z-index value, so as to solve the difference of the z-index of different bounce box occlusion layers on the page, but this idea can only solve the problem for the first time, and there will be the same problem if we open it again, so this idea is wrong.

The right way of thinking:

Looking at the role of different properties in the component, the blue pop-up box I use is the dialog component in the element component I used. therefore, by looking up the properties in this component, I find that the following three properties are related to the occlusion layer.

The occlusion layer must be used, so excluding modal, you can test whether the above problems can be solved by adding modal-append-to-body or append-to-body to the dialog pop-up box. If it is single-layer occlusion, use the first, multi-layer occlusion, add the second, the internal reason is not clear, if someone knows about the relevant problems, welcome guidance.

This is a message to determine "how to solve the problem of occlusion in vue multi-layer pop-up boxes". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!