Question

I’m trying to change the background of a jqueryui dialog box after it has been opened. Requirements prevent me from setting this in the stylesheet because the background color or image is unique for the person who clicks on the link (the background values are being pulled from the database).

When I run the following jquery command to change the css of the div after the dialog is loaded it doesn’t do anything?

$("#modal_popup_website").css("background","red !important");

or

$("#modal_popup_website .ui-dialog-content").css("background","red !important");

or

$(".ui-dialog-content").css("background","red !important");

What am I doing wrong?

First I initialize the dialog as follows:

$("#modal_popup_website").dialog({
            bgiframe: true,
            autoOpen: false,
            position: 'center',
            width: $(window).width()-30,
            minWidth: 990,
            height: 900,
            minHeight: 900,
            modal: true,
            stack: true, //Puts in front of other dialog's that may be open
            open: function(){

            },
            close: function() {
                //Save
            }

Then I open the dialog when the user click on a link like this:

$("#modal_popup_website").dialog("open");

After it is open I put in some HTML into the dialog box like this:

$("#modal_popup_website").html('gets loaded from external file');

Heres the HTML of the external file:

<div>some text</div>
<script type="text/javascript">
   $("#modal_popup_website").css("background","red !important");
</script>

And the < script > area is where I’m trying to change the css background. In this external PHP file I retrieve the background color or image from the database for this user and I want to change the background of the dialog box, but I can’t make it work.

Any ideas will be appreciated!

Thanks.

Answer 1

I ended up solving the problem in another way. I added another < div > and made it 100% wide, 100% height and used css background to add the image. Then I removed the scrollbar for the jqueryui dialog and just added overflow:auto to the new div I added and it gave me what I needed.