1

I have a div, divDialog, that contains a simple dialog box. It begins life invisible, but at a certain point I make it visible. The page has several other elements on it (menus, etc.) that have event listeners for the click event.

My question is, once divDialog is visible, how can I disable all click events for everything except divDialog? Of course, once divDialog is invisible again, I'd like to restore all listeners to normal behavior.

I read this elegant answer, but it doesn't disable outside clicks, nor is it cross-platform.

I do have a routine that will detect whether a node is an ancestor of another:

function isAncestorOf(ancestor, descendant) {...}

...and that may be necessary in the solution. But I'm having trouble with event listeners, bubbling, capturing, and cross-platform behavior (can't seem to figure it out for IE).

I'm not using jquery on this one; just regular ol' javascript.

Any suggestions?

Community
  • 1
  • 1
Jonathan M
  • 17,145
  • 9
  • 58
  • 91

2 Answers2

5

You should place a transparent, fixed div over the window. That way any clicks on the screen will be that div and not elements underneath it. This is popularly used as the background overlay for a modal dialog. In IE, you'll need to make sure there's a !DOCTYPE declared for position:fixed to work.

div#overlay {
   position:fixed;
   top:0;
   left:0;
   height:100%;
   width:100%;
   z-index:100;
   background-color:#444444;
   opacity:0.5;
   filter:alpha(opacity=50);
}

And you'll need to make sure divDialog has a z-index greater than that of the overlay.

Jonathan M
  • 17,145
  • 9
  • 58
  • 91
js1568
  • 7,012
  • 2
  • 27
  • 47
  • Set the `z-index` on `divDialog` to be 101 to be positioned above the overlay – js1568 Jun 09 '11 at 17:04
  • Wow. Hadn't thought of that. Of course, divDialog would need to have a higher z-index, right? No listeners would be involved then, would they? – Jonathan M Jun 09 '11 at 17:05
  • :), posted just as you were commenting about z-index. Thanks. – Jonathan M Jun 09 '11 at 17:06
  • 1
    OK. I tried it out. A couple of things that are necessary here (for the benefit of other readers) are: (1) you must have a !DOCTYPE in IE browser for position:fixed to work; and (2) the style needs "top:0; left:0;" add to it if the overlay is not the first thing on the page. – Jonathan M Jun 09 '11 at 18:08
  • I'm still having difficulty with it. Even when the overlay is present (I changed background-color to make sure), some clicks are passing through it, even with z-index:1000. – Jonathan M Jun 09 '11 at 18:10
  • OK. Got it out. In IE, the opacity style attribute doesn't work. So for cross-platform, you must include both the opacity attribute and "filter:alpha(opacity=50);", with the value 50 being equivalent to the 0.5 in the opacity attribute. IE is using numbers from 0 to 100 and W3C is using numbers from 0 to 1. Also, for IE (not sure about others), a "background-color:transparent" allows clicks behind the overlay, so you have to specify a color. I used a nice gray #444444, which combined with the opacity nicely grays out the background, directing the user's eyes to the dialog box. – Jonathan M Jun 09 '11 at 19:17
  • Submitted edited answer with changes mentioned in these comments. – Jonathan M Jun 09 '11 at 20:22
0

event.preventDefault will stop an event from bubbling up.

bdparrish
  • 3,216
  • 3
  • 37
  • 58
  • Yes, but if the event originates outside divDialog, in a link or menu, for example, divDialog will never see it to stop it from bubbling up. – Jonathan M Jun 09 '11 at 17:03
  • i know this is probably not what you want to do, but you have to "cover" up the other DOM elements. jQuery does this by creating a div that shows up below the dialog and does nothing but screen the user from clicking something else if it is a modal dialog, which is what you are going for, so pseudo-code ... on dialog box show; show screen; show dialog; -- on dialog box hide; hide dialog; hide screen; – bdparrish Jun 09 '11 at 17:08
  • That makes sense. You and js1568 are on the same track. Much thanks! – Jonathan M Jun 09 '11 at 17:11