模态框上使用颜色选择器

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

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

来个效果图：

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

插件下载：https://www.eyecon.ro/colorpicker/

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

<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
<script type="text/javascript" src="js/colorpicker.js"></script>

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

使用代码：

<input id='backgroundColorAlarm' type="text" name='backgroundColorAlarm' style='width:149px'/>

$('#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

关于属性z-index

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

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

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

转载于:https://www.cnblogs.com/wjup/p/10840348.html