jQuery插件在Modal中不起作用 [英] jQuery Plugin does not work in a Modal

问题描述

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

I am using this in a modal: http://www.web2media.net/laktek/2008/10/27/really-simple-color-picker-in-jquery/ but it does not work. The same code:

//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局部视图）它打破了！它做了一些工作，即重新格式化文本框以显示当前颜色，但点击它不会导致选择器出现！

works fine in a normal page but as soon as I load it in a jQuery UI Modal (the contents of which come from an ASP.Net MVC partial view) it breaks! It does some of the work, i.e reformats the text box to show the current colour but clicking it does not cause the selector to appear!

我怀疑这是一个使用问题jQuery里面的模态..

I suspect it's an issue with using jQuery inside modals..

有什么想法吗？

推荐答案

好的想出来，实际上相当愚蠢！

Ok figured it out, rather stupid actually!

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

Basically when you load a modal it is obviously on the same page and to appear above other elements the jQuery UI modal has a z-index of 1002!

因此，页面上的任何元素（包括大量jQuery弹出元素）都会出现在下面模式下，因此看起来不起作用。只需将更高的z-index（1003+）添加到颜色选择器或其他jQuery popup css样式。

As a result any elements on your page, including a lot of jQuery popup elements, will appear underneath the modal and hence appear not be working. Just add a higher z-index (1003+) to the color picker or other jQuery popup css style.

对于我链接到div的那个我需要添加的是：

For the one I linked to the div I needed to add was:

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

希望能帮助其他人。

这篇关于jQuery插件在Modal中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！