jQuery Plugin does not work in a Modal

Question

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" />

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!

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

Any ideas?

Damien Damien · Accepted Answer · 2009-06-11T11:43:37

Ok figured it out, rather stupid actually!

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!

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.

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

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

Hope that helps anyone else.

jQuery Plugin does not work in a Modal

1 Answers