I have a div
and want to hide it when I click outside. My code is:
<div id="mydiv">The div must be above button</div>
$('#mydiv').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('#mydiv').fadeOut(300);
});
But it is not working for me ...
UPDATE
Full code is presented below. When I click on a button it shows a div
above, so I need to hide this div
when I click outside.
DEMO
<div id="but" style="text-align: right;"><button type="button">Show Div!</button></div>
<div id="mydiv" style="display:none;">The div must be above button</div>
$("#but button").click(function(){
var pos = $(this).offset(),
div = $("#mydiv");
// Make it visible off-page so
// we can measure it
div.css({
"display": "block",
"border": "1px solid black",
"position": "absolute",
"left": -10000,
"top": 0
});
// Move it where we want it to be
div.css({
"left": pos.left - 40,
"top": pos.top - div.height() - 10
});
});
$('#myDiv').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('#mydiv').fadeOut(300);
});
To hide an element, set the style display property to “none”. document. getElementById("element").
Approach: Select the div element. Use delay function (setTimeOut(), delay()) to provide the delay to hide() the div element.
In javascript click is a bubbling event, it starts on a div and goes up to a document. When you stop an event propagation using a stopPropagation()
function, a click on the document is not handled. So, to solve your problem just remove e.stopPropagation()
.
DEMO 1
The best way is:
$('#mydiv').click(function(e) {
e.stopPropagation();
$(this).fadeOut(300);
});
DEMO 2
If I click on this div, how to make to click outside and hide this div ?
Ok, let's imagine, that when you are clicking on a container with id "wrapperId", "myDiv" should be hidden:
$("#wrapperId").click(function(e){
$('#mydiv').fadeOut(300);
})
if container is a document, you can use $(document)
instead of $("#wrapperId")
.
DEMO 3
It is not working look what is happening: jsbin.com/ilowij/7
You should stop a click event propagation when you are clicking the button. Make these changes:
$("#but button").click(function(e){
e.stopPropagation();
...
}
DEMO 4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With