如何修复那个将在jquery ui对话框之上的选择器“div”,并且在它之外是否可以这样做?什么是最好的解决方案?
这是我想看到的: 1 http://img6.imageshack.us/img6/4866/74030613.png
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();
});
});
答案 0 :(得分:0)
我认为这可以解决您的问题!
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();
});
});