Question

假设我有以下html：

HTML：

<div id="wrapper">
    <div class="dialog" title="Bold Red Test">
        <div class="bold red">Dialog Red Box Here</div>
    </div>
</div>

JS：

$(document).ready(function(){
   $('#wrapper').find('.dialog').dialog({
    autoOpen: true
    width:200,
    height:200
    });
});

此代码将生成一个对话框，该页面在页面正确加载时打开。我的目标是让对话框中的文本为红色和粗体。所以我想使用以下CSS

CSS：

注意：我不想摆脱#wrapper选择器。如果我摆脱它，我意识到它会起作用。

#wrapper .bold{font-weight:bold;}
#wrapper .red{color:#F00;}

我在CSS中使用选择器，以便它只在包装器内部将这些设置应用于此特定对话框。问题是这些CSS规则 不适用

我已将问题跟踪到HTML，以便将对话框移至</body>标记的正上方。 css包装器选择器无法设置粗体或如果对话框实际位于正文 下，则为红色但是对于我的项目，我需要将对话框放在包装器 中。

有没有办法让jQuery Dialog将对话框保留在HTML的起始位置？

这意味着它实际上仍然在我的示例的包装div内，而不是在</body>标记下移动。这可能吗？

Answer 1

您正在寻找appendTo选项。

例如，如果您想将对话框保留在body

中

$("#wrapper").dialog({
  appendTo: "body"
});

在你的情况下，我试过这个

$("#wrapper").dialog({
  appendTo: "#wrapper"
});

但我有错误，所以我建议像这样做

$("body").append("<div id='dialog-wrapper'></div>");
$("#dialog-wrapper").html($("#wrapper").html());
$("#wrapper").html("");
$("#dialog-wrapper").dialog({
  appendTo: "#wrapper"
});

Answer 2

尝试删除选择器中的id前缀，然后放置对话框的位置无关紧要。

.bold{font-weight:bold;}
.red{color:#F00;}

JS小提琴： http://jsfiddle.net/5FJ4a/9/

另一种解决方案是使整个包装器成为对话框的一部分：

<强> HTML

<div id="wrapper" title="Bold Red Test">
    <div class="dialog">
        <div class="bold red">Dialog Red Box Here</div>
    </div>
</div>

<强>的Javascript

$(document).ready(function(){
   $('#wrapper').dialog({
    autoOpen: true,
    width:200,
    height:200
    });
});

JS小提琴： http://jsfiddle.net/5FJ4a/10/

JQueryUI对话窗口不在我的DIV里面，放在身体下面。如何保持我的div？

2 个答案: