模态框上使用颜色选择器

川长思鸟来 2022-02-19 14:55 198阅读 0赞

问题：模态框无法显示颜色选择器插件

解决：css文件里为每个class设置属性z-index，设置值为999

来个效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lrdTUyMDA_size_16_color_FFFFFF_t_70][]

知识点：colorpicker颜色选择器插件的使用，z-index属性相关知识

插件下载：[https://www.eyecon.ro/colorpicker/][https_www.eyecon.ro_colorpicker]

使用方法：下载插件，页面引用

图片也一并引入到项目中，可在colorpicker.css中更改图片路径。

使用代码：

$('#backgroundColorAlarm').ColorPicker({
    	onSubmit: function(hsb, hex, rgb, el) {
    		$(el).val(hex);
    		$(el).ColorPickerHide();
    	},
    	onBeforeShow: function () {
    		$(this).ColorPickerSetColor(this.value);
    	}
    })
    .bind('keyup', function(){
    	$(this).ColorPickerSetColor(this.value);
    });

这样便可使用颜色调色板了

关于模态框无法弹出调色板，可在colorpicker.css中为每个class加入属性z-index:999

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lrdTUyMDA_size_16_color_FFFFFF_t_70 1][]

关于属性z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lrdTUyMDA_size_16_color_FFFFFF_t_70]: /images/20220219/f6642691778a43edb5a71debb8aaa4dd.png
[https_www.eyecon.ro_colorpicker]: https://www.eyecon.ro/colorpicker/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lrdTUyMDA_size_16_color_FFFFFF_t_70 1]: /images/20220219/ddc5a80fc3274a32a5275f1f23dc0dad.png