Home > Developer > Web Develop
When writing a page, we often use the pop-up layer. For the pop-up layer, the original meaning is to increase the user's interaction, enhance the user's goodwill degree. If the pop-up layer does not have a better experience, then how to talk through interaction to enhance the goodwill ...
First, several pop-up layers are noted:
Today, mainly say click on other areas to hide the pop-up layer. The author was tortured for a long time, almost every time to achieve this effect is to check the data, try again and again to achieve the desired effect. Such trouble is due to the insufficient understanding of event bubbling to be handled incorrectly.
What is event bubbling? Why use it?
Event Bubbling: the node (document) that receives the most specific element (the current node) and then propagates up to the least-specific element;
When implementing the Click to hide the pop-up layer, you need to bind a fixed-point event to the document, and event bubbling will cause the event to be triggered when the other node is clicked, causing an event conflict, causing the display to show a pop-up layer and hiding the pop-up layer when it is not hidden.
<styletype= "Text/css">. Layer-container{position:Absolute;Top:0; Left:0;width:100%;Height:100%;Background-color:rgba (0, 0, 0, 0.5);Display:Flex;justify-content; center; Align-items:Center;Display:None; }. Layer-main{width:75%;padding:20px;Max-width:400px; }</style><Body><Button>Show pop-up layer</Button><Divclass= "Layer-container"> <Divclass= "Layer-main"> <Divclass= "Layer-header"></Div> <Divclass= "Layer-content"></Div> <Divclass= "Layer-footer"> <Divclass= "Layer-button">Confirm</Div> </Div> </Div></Div><Script> //Click the button to display the popup layer $("Button"). Bind ("Click", function(){ $(". Layer-container"). CSS ("Display", "Flex"); Event.stoppropagation ();//========== block bubbling 1 }) //Click another area to hide the popup layer$ (document). Bind ("Click", function(){ $(". Layer-container"). CSS ("Display", "None"); }) //Click the Confirm button in the pop-up layer $(". Layer-button"). Bind ("Click", function() {Console.log ("Click the Confirm button") }) //bind a point-click event to a popup layer to prevent bubbling $(". Layer-main"). Bind ("Click", function() {event.stoppropagation ();//========== block bubbling 2 })</Script></Body>
Description
In fact, the target of the event (Event.target) can also be used to identify the node currently clicked, so that the next operation, such as the specific operation of the specified node
==>> Hide Div Except for the specified area by tapping any area
$ (' body '). Click (function(e) {vartarget =$ (e.target); //If there are child elements under #layer or #btn, you can use //!target.is (' #btn * ') &&!target.is (' #layer * ') if(!target.is (' #btn ') &&!target.is (' #layer '))) { if($ (' #layer '). Is (': Visible ')) ) { $(' #layer '). Hide (); } }});$(' Body '). Click (function(e) {if(E.target.id! = ' btn ' && e.target.id! = ' overlay ') if($ (' #layer '). Is (': Visible ')) ) { $(' #layer '). Hide (); }})
Third, conclusion
Bye!
JS events Bubble and click Other areas to hide pop-up layers
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
