0

I am working on a popup menu in my web page. currently, I can successfully display the menu. What I want to do is hiding the menu when I click outside of the menu. I know one way to do this is bind the click event to the document:

$(document).on('click', function(event) {
    // here I can hide the menu
});

but I don't want to do that way, because binding an click event to the document looks very ugly and make the code difficult to maintain.

many many thanks.:)

freedom1989
  • 3
  • 2
  • This is what you need http://benalman.com/projects/jquery-outside-events-plugin/ – elclanrs May 23 '13 at 01:47
  • 4
    I don't see why it's bad to bind a click handler to _body_ or _document_... Could you explain why that's ugly or hard to maintain? Here are a few answers that suggest doing just that: [one](http://stackoverflow.com/q/10666179/778118), [two](http://stackoverflow.com/q/2329816/778118), [three](http://stackoverflow.com/q/4912647/778118)... – jahroy May 23 '13 at 01:59
  • It was answered [here](http://stackoverflow.com/questions/16594909/jquery-prevent-div-from-hiding-when-i-click-it/16595178). – Cesar Castro May 23 '13 at 03:34
  • In my project, another feature has already bind a click handler to document, I don't want to add my logic into that handler. – freedom1989 May 27 '13 at 03:21

1 Answers1

0

You can wrap your popup menu like this:

<div class="overlay">
    <div class="popup">...</div>
<div>

And then 

$(".overlay").click(function(){
    // hide your popup
})

It would be good to make the overlay position:fixed

Kamran Eyyubov
  • 300
  • 4
  • 11