I have a floating div that gets displayed, and I want it to be hidden when the user clicks off the div. This would be similar to the .hover() funtion callback when hovering off an element. Only I want to do this for click.
I tried just setting a click event for the body, which would hide the div, but that gave unexpected results.
Anyone have ideas on how I could easily do this?
Source: Tips4all, CCNA FINAL EXAM
Another, possibly simpler, option would be to add a transparent div between the floating DIV and the rest of the page.
ReplyDeleteA simple click event on the transparent DIV could handle the hiding, and it would avoid the issues you are encountering with the click event.
If you want to clear the div when you click somewhere else in the page, you can do something like:
ReplyDelete$('body').click(function(event) {
if (!$(event.target).closest('#myDiv').length) {
$('#myDiv').hide();
};
});
The Best way to do this is:-
ReplyDelete$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("divtohide")) {
$(".divtohide").hide();
}
});
Surely you're looking for the blur event?
ReplyDelete