Hide div on mouse click

Question

I've created dialog windows; and I want them to be closed whenever the uses clicks anywhere else than the dialog window buttons (hyperlinks).

I was creating one large "overlay" div (0 opacity) at the back of dialog window to catch the clicks, but that becomes quite problematic when the user wants to clck anything at the back (like another hyperlink) as well as closing the dialog at the same time. Since there is overlay, it becomes activated (to close the dialog) and the clicked hyperlink is not catched.

Shortly, I need a solution for this situation where I'll close the dialog windows whenever user does anything except clicking the dialog window buttons.

I hope it's clear; thank you.

It'll be very hard to clean up things, I believe I'd rather prefer to explain with words. — Mia, Apr 27 '13 at 19:36

score 1 · Answer 1 · edited May 23 '17 at 12:23

This is being caused by event bubbling. It's a shame that 2 people downvoted @Lilith2k3 answer because he wasn't wrong and @Xotic750 had way too complex a solution. You do need an event handler on your body, but you need simply to filter out clicks from the your dialog.

You need two onclick() handlers. One in your body to close the dialog, and the other in your dialog to cancel event bubbling. See below

function dlgClickHandler(e) {
    // do dialog stuff, then...
    e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); // cancel event bubbling so body click handler not activated
}

function bodyClickHandler(e) {
    // close dlg
}

This is also the reason you can't do this simply by comparing the ID of the dialog, because the click may have come from one of the children (eg. your OK, cancel buttons).

Working DEMO
Without jQuery DEMO

I've wrapped the functions in a module pattern to make it a neater component, and although I've used jQuery in the first example (which I suspect you are not) the technique pre-dates jQuery.

One of the reasons I suspect you're not using jQuery, is because if you were you'd probably already have stumbled across one of the many jQuery popup plugins for handing dialogs like this. If you've not tried jQuery take a look, it might help you out in many other ways too.

score 0 · Answer 2 · edited May 23 '17 at 11:50

This is a very basic demonstration. We have a yellow div on the screen that represents your dialog. If you click anywhere in the div then it remains visible, you could fill this div with more HTML and event handlers to do as you wish. Click anywhere outside of the div and the div will become hidden. Note: I am not cleaning up any event handlers, which you will want to do.

Please see the answer by cirrus, where he actually gives an explanation about event propagation and why you will need it in your solution, which I haven't done here. He also gives you a solution using vanilla javascript and jquery, which I don't. He also demonstrates the javascript module pattern where I have not. I wouldn't have been able to bring you this answer without his constructive critisism and tuition, which prompted me to come back here and improve on my original poor, time constrained answer. Good luck.

CSS

.box {
    width:300px;
    height:100px;
    position: absolute;
    top: 30%;
    left: 30%;
    background-color:yellow;
    border:2px solid;
}
#message {
    position: absolute;
    right: 50%;
    bottom: 50%;
}
#button1 {
    position: absolute;
    right: 0;
    bottom: 0;
}
#button2 {
    position: absolute;
    right: 4em;
    bottom: 0;
}

HTML

<div id="box" class="box">
    <div id="message"></div>
    <button id="button1">
        <img src="http://img856.imageshack.us/img856/3817/ticklf.png" alt />Ok</button>
    <button id="button2">
        <img src="http://img822.imageshack.us/img822/1917/crossn.png" alt />Cancel</button>
</div>

JavaScript

function dontBubble(evt) {
    evt.stopPropagation();
}

function hideBox(evt) {
    box.hidden = true;
}

function messgage() {
    document.getElementById("message").textContent = "I'm ignoring you";
}

document.getElementById("box").addEventListener("click", dontBubble, false);
document.getElementById("button1").addEventListener("click", messgage, false);
document.getElementById("button2").addEventListener("click", hideBox, false)
document.addEventListener("click", hideBox, false)

;

On jsfiddle

score -1 · Answer 3 · answered Apr 27 '13 at 19:57

-1

At best, you would bind a click event to $("body"), which checks, where the user clicked and in case the user clicked not within the dialog, you could unbind the event and close the dialog.

answered Apr 27 '13 at 19:57

Thomas Junk

5,588
2
30
43

Hide div on mouse click

3 Answers3