How to close the popup when clicked outside the element
Posted By : Vinay Tiwari | 02-Jun-2017
This blog explains the solution to resolve the problem of closing the popup when any outer element is clicked. I have used jquery function to solve it.
This function explain us, how to target every element of popup and differntiating it with the outer elements. If function gets the element in which we have targeted, then it closes the popup.
Now we will define the code structure
HTML
Spotter Finance is Waiting find Quotes for you
Important Information
CSS
.quote-info-bg {
background: rgba(0, 0, 0, 0.5);
width: 100%;
position: fixed;
top: 0;
z-index: 99;
height: 100%;
overflow-y: scroll;
left: 0px;
}
.quote-popup {
background: #fff;
padding: 65px;
position: absolute;
margin: 10px auto 10px;
left: 0;
right: 0;
width: 100%;
max-width: 804px;
border-radius: 10px;
}
Jquery
$(".quote-info-bg").click(function(event ){
var $target = $(event.target);
if($target.hasClass("quote-info-bg")){
$(".quote-info-bg").hide();
}
});
Declaration
The event.target attribute can be registered as an element for a particular event or as a descendant of the event in consideration. Event.target is frequently compared to this to decide whether the event is handled because of the concept event bubbling. In Event delegation 'this' property is very useful, especially when events bubbling occurs.
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vinay Tiwari
Vinay is a bright UI developer, having knowledge of HTML, CSS, Bootstrap, Jquery and AngularJs. His hobbies are interacting with people, listening music etc.