jQuery Plugin ne fonctionne pas dans un modal

Question

Je l'utilise dans un modal: http://www.web2media.net/laktek/2008/10/27/really-simple-color-picker-in-jquery/ mais cela ne fonctionne pas. Le même code:

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

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

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

fonctionne très bien dans une page normale, mais dès que je charge dans une interface utilisateur jQuery Modal (dont le contenu provient d'une vue partielle ASP.Net MVC) il se casse! Il effectue une partie du travail, par exemple, il reformate la zone de texte pour afficher la couleur actuelle, mais cliquer dessus ne provoque pas l'apparition du sélecteur!

Je soupçonne que c'est un problème avec l'utilisation de jQuery à l'intérieur modaux ..

Toutes les idées?

Answer 1

Ok l'a compris, plutôt stupide en fait!

Fondamentalement, lorsque vous chargez un modal, il est évidemment sur la même page et pour apparaître au-dessus d'autres éléments, le modal UI jQuery a un z-index de 1002! Par conséquent, tous les éléments de votre page, y compris beaucoup d'éléments contextuels jQuery, apparaissent sous le modal et ne semblent donc pas fonctionner. Ajoutez simplement un z-index plus élevé (1003+) au sélecteur de couleur ou à un autre style de css popup jQuery.

Pour celui que je lié à la div que je devais ajouter était:

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

espoir qui aide à quelqu'un d'autre.