How to close div (modal) clicking outside. Pinterest and Facebook way

Question

The classic way to is to do a modal is a div with the content (dialog) and a div with z-index lower (overlay) Then, I can bind the click event on the overlay and hide de content dialog. ```

...

``` But I have noticed that Pinterest and Facebook combines it to one div. ```

``` But in this approach, how can I bind the click event to close de dialog only in the overlay that not have the dialog? http://jsfiddle.net/mCupS/9/

Accepted Answer

By doing something like this:

```
$('.modal').click(function(){
     $('.modal, .inner').hide(); 
});                                    
$('.inner').click(function(e){
   e.stopPropagation();
});              
​
```

http://jsfiddle.net/mCupS/10/

`event.stopPropagation()` : Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

How to close div (modal) clicking outside. Pinterest and Facebook way

Solution

Problem