JQueryUI Dialog Window Not Inside My DIV, Placed Under Body. How to keep inside my div?

Question

Let say I have the following 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
    });
});

This code will generate a dialog box that opens when the page loads correctly. My goal is to have the text inside the dialog box be red and bold. So I want to use the following CSS

CSS:

NOTE: I DO NOT want to get rid of the #wrapper selector. I'm aware it'll work if I get rid of that.

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

I'm using selectors in CSS so that it only applies these settings to this particular dialog when its inside of wrapper. The problem is these CSS rules do not apply

I have tracked down the issue to the HTML for the dialog being moved to right above the </body> tag. The css wrapper selectors can't set the rules for bold or red if dialog is actually under body but for my project I need to have the dialog be inside of wrapper.

Is there a way to have the jQuery Dialog keep the dialog box in its starting location in the HTML?

This means that it would physically still be inside of the wrapper div for my example instead of moving under the </body> tag. Is this possible?

Answer 1

You are looking for the appendTo option.

For example, if you want to keep the dialog inside body

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

In your case I tried this one

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

but I've got error, so I suggest to make it like this

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

Answer 2

Try removing the id prefix in the selector, then it should not matter where the dialog is placed.

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

JS Fiddle: http://jsfiddle.net/5FJ4a/9/

Another solution would be to make the entire wrapper part of the dialog:

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/