Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery

Hide Div When Clicked Outside

Post a Comment
I have a form system which is dynamically generated. The code below is the button which calls the calendar. 
jQuery('body').click(function(event) {
    if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
         jQuery(".yui-calcontainer").hide();
    }
});

or

jQuery(document).on('click', 'body', function(event) {
    if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
         jQuery(".yui-calcontainer").hide();
    }
});

Solution 2:

You can use some trick like this , check this code below

$(document).dblclick(function (e)
                                {
                var container = $(".yui-calcontainer");
                if (!container.is(e.target) // if the target of the click isn't the container...
                    && container.has(e.target).length === 0) // ... nor a descendant of the container
                {
                    container.hide();  /// or container.toggle();  to show/hide

                }
            });
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><bodystyle="height:100% ; width:100%;";><divid="cal1_0Container"style="clear: both; position: absolute; z-index: 9987;"class="yui-calcontainer single">
            Calendar Here
        </div></body>

use container.toggle(); for show/hide

let me know if it this is helpful to you .

This was my HTMl 

<!DOCTYPE html><html><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script>
            $(document).dblclick(function (e)
                                {
                var container = $(".yui-calcontainer");
                if (!container.is(e.target) // if the target of the click isn't the container...
                    && container.has(e.target).length === 0) // ... nor a descendant of the container
                {
                    container.toggle();
                }
            });
        </script></head><bodystyle="height:100% ; width:100%;";><divid="cal1_0Container"style="clear: both; position: absolute; z-index: 9987;"class="yui-calcontainer single">
            Calendar Here
        </div></body></html>

Solution 3:

It looks like you're trying to use the YUICalendar library, in which case it might benefit to take a look at the official documentation @ https://developer.yahoo.com/yui/calendar/

I found an example that might accomplish what you're trying to achieve: https://developer.yahoo.com/yui/examples/calendar/calcontainer_clean.html

Solution 4:

When you click on button you will see the div and when you again click the button div closed and when div is open and you click outside the div ...div closed...

$(document).ready(function(){
    $('#privacy').toggle();
    $('#privacybutton').click( function(e) {
        // stops link from making page jump to the top
        e.preventDefault();
        // when you click the button, it stops the page from seeing it as clicking the body too
        e.stopPropagation();
        $('#privacy').toggle();
    });
    $('#privacy').click( function(e) {
        // when you click within content area, it stops the page from seeing it as clicking the body too
        e.stopPropagation();
    });
    $('body').click( function() {
        $('#privacy').hide();
    });
});

Solution 5: 

 $("body").on('click', function (e) {
    var ignoreContainer = $(".feeling_menu_trigger"); //you can add //.feeling_menu_container class if you want to keep container on when user //click inside of container e.g  
 $(".feeling_menu_trigger,.feeling_menu_container")
    if (!(ignoreContainer.is(e.target) || 
     ignoreContainer.has(e.target).length)) {
        $(".feeling_menu_container").hide();
    }
  });

Post a Comment for "Hide Div When Clicked Outside"