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 proble

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

Answer 2

you can try like below

$('input:not(.colour-picker)').iris('hide');

Answer 3

For what it's worth, you don't need to call iris directly. As of 3.5, The WordPress core defines a wrapper method called wpColorPicker(), that implements iris with some additional functionality:

http://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

This wrapper takes care of all the hiding and showing of the picker for you, and keeps track of individual instances.

If you're building a WP plugin, it's probably better to use their wrapper, as they will be adding new features to it in the future. Plus, if they decide to go with another library other than iris, your plugin code will likely break. The wrapper will prevent that from happening.