How do you close the Iris colour picker when you click away from it?

Question

I'm using the iris colour picker in a Wordpress plugin. I can get it to display and then show the clicked value in the associated input just fine, however there is a problem...

I can't then get rid of the box! Is there a way to make the box disappear when you click off of it?

I'm invoking iris using this simple call -

jQuery(document).ready(function($){
    $('.colour-picker').iris();
});

Common sense tells me that I should be able to pass this as an option to the .iris() function for this specific need, but I cannot find any reference to such an option in the the docs.

The closet I have found is that you can call a hide method, but all it lists is $(element).iris('hide');, with no explanation at all of how to link it to the specific input that invoked iris in the first pace, or how to detect if the user has clicked away from iris

Does anyone use iris and know how I can achieve what I am trying to do? Thanks.

Additional - Here is a JS fiddle that demonstrates the problem described. The JS that invokes iris can be found right at the bottom of the JS section.

Answer 1

You can try something like this:

jQuery(document).ready(function ($) {    
    $('.colour-picker').iris();    
    $(document).click(function (e) {
        if (!$(e.target).is(".colour-picker, .iris-picker, .iris-picker-inner")) {
            $('.colour-picker').iris('hide');
            return false;
        }
    });
    $('.colour-picker').click(function (event) {
        $('.colour-picker').iris('hide');
        $(this).iris('show');
        return false;
    });
});

Updated fiddle