jquery when clicked outside the div close the div

Question

What actually I get is given in: http://jsfiddle.net/y9uwY/7/

What I want:

if user click on black area then nothin should happen
clicked outside the black area must be closed

@sem it kind of *is*...At least he has tried, and has shown his code, which is more than many questions you see here. — danwellman, Oct 09 '12 at 11:31
Could you put it all together in a JSFiddle so we can see it better ? I tried but something is missing. — Cristiano Fontes, Oct 09 '12 at 11:44

score 1 · Answer 1 · answered Oct 09 '12 at 11:37

try this fiddle, your body tag will only ever be the size of the main .select_roles element, so setting the widths and heights to 100% gives you a clickable area for the hide (this works in msot browsers, to allow for a little more, might be worth adding some padding as well). This simply sets the .select_roles to display:none; but starts with the class of .active to make it display:block; once you click outside of the area we remove the .active class.

Fiddle: http://jsfiddle.net/y9uwY/3/

score 1 · Answer 2 · answered Oct 13 '12 at 01:27

try the fiddle now http://jsfiddle.net/y9uwY/9/

$('.select_roles').click(function (e){
    e.stopPropagation();
                 if($(this).hasClass('active')){
                 }
                 });

            $('body').click(function (){
                 if($('.select_roles').hasClass('active')){
                     $('.select_roles').removeClass('active');
                 }
            });

score 0 · Accepted Answer · edited May 23 '17 at 10:24

0

You have to stop the event bubbling up to body. Here is the corrected code http://jsfiddle.net/y9uwY/8/

For Reference and Further Reading: What is event bubbling and capturing?

edited May 23 '17 at 10:24

Community

1
1

answered Oct 09 '12 at 13:28

Pyro979

202
1
10

jquery when clicked outside the div close the div

3 Answers3