與「farbtastic」顏色選擇器的jquery ui對話框

Question

如何解決這個選擇器「div」，它會在jQuery UI對話框之上，並且它可以這樣做？什麼可能是最好的解決方案？

這裏是我想看到的內容： 1 http://img6.imageshack.us/img6/4866/74030613.png

http://jsfiddle.net/gt4Ry/2/

HTML：

<div id="settingsDialogWindow" title="Settings" style="display:none;"> 
    <label for="color">Color:</label> 
    <input type="text" id="color" name="color" value="#123456" maxlength="7" /> 
    <div id="picker" style="position: absolute; 
    left: 50px; 
    border: 1px solid #aaa; 
    background-color: #fff; 
    -webkit-border-radius: 4px !important; 
    border-radius: 4px !important; 
    z-index: 99999999;"></div> 
</div> 

JS：

$(function() { 
    $("#settingsDialogWindow").dialog({ 
     modal: true, 
     draggable: true, 
     height: 'auto', 
     width: 300, 
     minWidth: 300, 
     minHeight: 60, 
     resizable: false, 
     position: { at: "center middle" } 
    }); 


    $('#picker').farbtastic('#color'); 

    $("#color").focus(function() { 
     $("#picker").show(); 
    }); 
    $("#color").focusout(function() { 
     $("#picker").hide(); 
    }); 
}); 

Answer 1

我認爲這能解決您的問題！

http://jsfiddle.net/gt4Ry/15/

HTML：

<div id="settingsDialogWindow" title="Settings" style="display:none;"> 
<label for="color">Color:</label> 
<input type="text" id="color" name="color" value="#123456" maxlength="7" /> 
</div> 
<div id="picker" style="position: absolute; 
display:none; 
left: 50px; 
border: 1px solid #aaa; 
background-color: #fff; 
-webkit-border-radius: 4px !important; 
border-radius: 4px !important; 
z-index: 99999999;"> 
</div> 

JS：

$(function() { 
     $("#settingsDialogWindow").dialog({ 
      modal: true, 
      draggable: true, 
      height: 'auto', 
      width: 300, 
      minWidth: 300, 
      minHeight: 60, 
      resizable: false, 
      position: { at: "center middle" }, 
      drag: function(event, ui) { 
       $("#picker").css({top:ui.position.top+115,left:ui.position.left+30}); 
      } 
     }); 


     $('#picker').farbtastic('#color'); 

     $("#color").focus(function() { 
      $("#picker").show(); 
     }); 
     $("#color").focusout(function() { 
      $("#picker").hide(); 
     }); 
    });