1

LIVE DEMO

Buttons are built as divs.

I would like to create the following behavior:

  • When user clicks on the button, a dialog appears.
  • Then, if user clicks anywhere else on the page, the dialog disappears.

I'm struggling to implement the second requirement.

I tried to use hasFocus on divs, but it doesn't seem to work. Looks like hasFocus works on input elements like input, button, etc.

How would you implement the desired behavior?

Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746
  • 2
    Be ware of browser support for `div`s being able to take focus ([this question](http://stackoverflow.com/q/1599660/419956) seems to talk about that). – Jeroen Feb 10 '14 at 07:12
  • Think you can simplify this a little. Put a click binding on a div (button) and click binding on the main container. And you disable bubble clicking, and you have it. If you need an example let me know. – mirage Feb 10 '14 at 12:16

1 Answers1

2

The best solution I found is to put tabindex on the div. This makes the div focusable.

DEMO

Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746