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?

Shockproof

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"
});

Naumann

@medhamza7 what error do you receive? I tried your first suggestion successfully jsfiddle.net/2h6fz17u – Enforce

@Enforce "Failed to execute 'appendChild' on 'Node': The new child element contains the parent." if you add appendTo: "#wrapper" – Naumann

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/

Pigtail

I'm aware that getting rid of the wrapper selector would allow the colors & bold styles to show but that is not the issue I'm having. For technical reasons I need the dialog to stay where it is so I can design correctly with a setup & framework I'm under. I can't make the entire wrapper part of the dialog also. What I need is to physically have the dialog be kept in its location instead of moving above </body> – Shockproof

Maybe try switching to SimpleModal – Pigtail

It's hard to explain but I have a framework that loads 3 different CSS files for tablet, mobile and desktop, and they load responsively as necessary into different wrappers, one for mobile, one for tablet and one for desktop. Because I use the same class names, in CSS I want to be able to only set css rules for dialogs for each different resolution I'm targeting (tablet or mobile for example). I'm aware of media queries and am using them where applicable. – Shockproof

hmm what is SimpleModal? – Shockproof

Its a boiled down plugin exclusively for dialog boxes, I have found it to be lighter weight and more configurable than jQuery UI. See: ericmmartin.com/projects/simplemodal – Pigtail