Диалоговое окно JQueryUI находится не внутри моего DIV, расположено под телом. Как сохранить внутри моего div?

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 оставляло диалоговое окно в исходном месте в 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 Fiddle: 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 Fiddle: http://jsfiddle.net/5FJ4a/10/