当你点击远离它时，如何关闭虹膜颜色选择器？

问题描述：

我在Wordpress中使用 iris颜色选择器 插入。我可以得到它显示，然后显示在相关的输入的点击值很好，但是有一个问题...

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?

我调用 iris 这个简单的调用 -

I'm invoking iris using this simple call -

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

常识告诉我，我应该能够将这个选项传递给 .iris（）函数，但我找不到任何引用这样的选项在 docs 。

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.

我发现的衣柜是可以调用 hide 方法，它所有的列表是 $（element）.iris（'hide'）; ，没有解释如何链接到特定的输入调用 iris 在第一步中，或如何检测用户是否点击了 iris

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

有没有人使用 iris ，知道我如何实现我想要做的事情？感谢。

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

其他 - 以下是 JS小提琴，演示所描述的问题。调用 iris 的JS可以在JS部分的底部找到。

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.

答

您可以尝试这样：

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;
    });
});

更新小提琴

当你点击远离它时，如何关闭虹膜颜色选择器？

相关推荐