I am using this code:
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
And this HTML:
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
The problem is that I have links inside the div and when they no longer work when clicked.
Wouldn't something like this work?
$("body *").not(".form_wrapper").click(function() {
});
or
$("body *:not(.form_wrapper)").click(function() {
});
So many answers, must be a right of passage to have added one... I didn't see a current (jQuery 3.1.1) answers - so:
$(function() {
$('body').on('mouseup', function() {
$('#your-selector').hide();
});
});
Copied from https://sdtuts.com/click-on-not-specified-element/
Live demo http://demos.sdtuts.com/click-on-specified-element
$(document).ready(function () {
var is_specified_clicked;
$(".specified_element").click(function () {
is_specified_clicked = true;
setTimeout(function () {
is_specified_clicked = false;
}, 200);
})
$("*").click(function () {
if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
$(".event_result").text("you were clicked on specified element");
} else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
$(".event_result").text("you were clicked not on specified element");
}
})
})
$(document).ready(function() {
$('.modal-container').on('click', function(e) {
if(e.target == $(this)[0]) {
$(this).removeClass('active'); // or hide()
}
});
});.modal-container {
display: none;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 999;
}
.modal-container.active {
display: flex;
}
.modal {
width: 50%;
height: auto;
margin: 20px;
padding: 20px;
background-color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-container active">
<div class="modal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p>
</div>
</div>i did it like this:
var close = true;
$(function () {
$('body').click (function(){
if(close){
div.hide();
}
close = true;
})
alleswasdenlayeronclicknichtschliessensoll.click( function () {
close = false;
});
});
You might encounter some issues when using the accepted answer with pop-up windows. There might be a case where clicking on a random place might result in unwanted actions, i.e. clicking on a button by mistake might take you to a new page.
I am not sure if this is the most efficient solution but to prevent this I would suggest using a screenmask. Make sure the screenmask is right below the <body> tag so that it can cover all the screen by width:100%; height: 100%. Also note that it is above all elements by z-index: 99. If you want another item or div to be clickable when the screenmask is active, just assign a higher z-index to that item or div.
The screenmask is initially not-displayed (displayed:none) and it calls a hide function when clicked (onclick="hidemenu()").
<body>
<div class="screenmask" onclick="hidemenu()" style="position:fixed; width: 100%; height: 100%; top: 0px; right: 0px; display: none; z-index: 99;"></div>
The javascript functions to deal with "multiple distinct pop-up menus on the same page" might be like the ones below:
<script>
// an element with onclick="showmenu('id_here')" pops a menu in the screen
function showmenu(id) {
var popmenu = document.getElementById(id); // assume popmenu is of class .cardmenu
$('.cardmenu').hide(); // clear the screen from other popmenus first
$(popmenu).show(); // pop the desired specific menu
$('.screenmask').show(); // activate screenmask
}
function hidemenu() { // called when clicked on the screenmask
$('.cardmenu').hide(); // clear the screen from all the popmenus
$('.screenmask').hide(); // deactivate screenmask
}
</script>
This solution should work fine, it's easy :
jQuery(document).ready(function($) {
jQuery(document).click(function(event) {
if(typeof jQuery(event.target).attr("class") != "undefined") {
var classnottobeclickforclose = ['donotcountmeforclickclass1', 'donotcountmeforclickclass2','donotcountmeforclickclass3'];
var arresult = jQuery.inArray(jQuery(event.target).attr("class"), classnottobeclickforclose);
if (arresult < 0) {
jQuery(".popup").hide();
}
}
});
});
In Above code change donotcountmeforclickclass1 , donotcountmeforclickclass2 etc with classes which you have used to show popup or on it's click popup should not effect so you have to definitely add class which you are using to open popup.
Change .popup class with popup class.
I was working over a search box which shows the autocomplete according to the processed keywords. When i dont want to click over any option then i will use the below code to hide the processed list and it works.
$(document).click(function() {
$('#suggestion-box').html("");
});
Suggestion-box is my autocomplete container where i am showing the values.
So many answers I could not use. Instead I took the accepted answer (which works well) and shortened to this (using a descendant selector):
$(document).mouseup(function(e)
{
if (!$(e.target).is("#targetSelector,#targetSelector *")) {
$('#targetSelector').hide();
}
});
As it only operates at user-interaction speed, no point assigning to a variable