1

そのピッカー「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();
    });
});
4

1 に答える 1

0

これで問題は解決すると思います！

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>

J:

$(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();
        });
    });
于 2013-02-28T19:12:50.867 に答える