jQuery插件在Modal中不起作用

时间:2009-06-10 12:14:54

标签: jquery jquery-ui jquery-plugins modal-dialog z-index

我在模态中使用它:http://www.web2media.net/laktek/2008/10/27/really-simple-color-picker-in-jquery/但它不起作用。相同的代码:

//Start of document Ready which contains event handlers
$(document).ready(function() {

    $('#ForeColor').colorPicker();
});

<input type="text" value="#333399" id="ForeColor" class="colourPicker" />

在普通页面中工作正常,但只要我在jQuery UI模板(其内容来自ASP.Net MVC局部视图)中加载它就会中断!它完成了一些工作,即重新格式化文本框以显示当前颜色,但单击它不会导致选择器出现!

我怀疑在模态中使用jQuery是一个问题..

有什么想法吗?

1 个答案:

答案 0 :(得分:3)

好的想通了,实际上相当愚蠢!

基本上当你加载一个模态时,它显然位于同一页面上并且出现在其他元素之上,jQuery UI模式的z-index为1002!

因此,页面上的任何元素(包括许多jQuery弹出元素)都会在模式下面出现,因此看起来不起作用。只需在颜色选择器或其他jQuery popup css样式中添加更高的z-index(1003+)。

我链接到div的那个我需要添加的是:

div#color_selector 
{
   //other stuff
   z-index: 1120; 
}

希望能帮助其他人。