How to apply background-color css for jquery dialog

Question

I am forming some morel pop up at run time like below, but i want to apply the background color css how to apply it?

$("<div></div>")
                .addClass("dialog1")
                .attr("id", $(this).attr("id"))
                .appendTo("body")
               // .addCss("background-color","red")
                .dialog({
                    title: $(this).attr("data-dialog-title"),
                    close: function () { $(this).remove() },
                    width: $(this).attr("data-dialog-width"),
                    modal: true,
                    position: 'center',
                    resizable: $(this).attr("data-dialog-resizable")
                }).load(url);

                $(".close").live("click", function (e) {
                    e.preventDefault();
                    // $(this).dialog('destroy').remove();
                    $(this).closest(".dialog1").dialog("close");
                });

have you tried using .css()

bipen
– bipen

2013-05-08 09:33:06 +00:00
Commented May 8, 2013 at 9:33 — bipen
– bipen, Commented May 8, 2013 at 9:33

Eli · Accepted Answer · 2013-05-08 09:33:00Z

3

You can use css() instead ofaddCss:

.css("background-color","red")

as well as live() is deprecated, you should use on() instead

answered May 8, 2013 at 9:33

Eli

14.9k5 gold badges61 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ganesh Bora Over a year ago

as above will be required to call at all the places where ever dialog is initiated in the site we can easily override the css for all dialog.

bipen · Accepted Answer · 2013-05-08 09:33:57Z

use .css()

 $("<div></div>")
            .addClass("dialog1")
            .attr("id", $(this).attr("id"))
            .appendTo("body")
            .css("background-color","red")
            .dialog({
                title: $(this).attr("data-dialog-title"),
                close: function () { $(this).remove() },
                width: $(this).attr("data-dialog-width"),
                modal: true,
                position: 'center',
                resizable: $(this).attr("data-dialog-resizable")
            }).load(url);

and use on() instead of live()

            $(".close").on("click", function (e) {
                e.preventDefault();
                // $(this).dialog('destroy').remove();
                $(this).closest(".dialog1").dialog("close");
            });

delegate it ,if you are attaching this to dynamically generated element..

    $(document).on("click",".close", function (e) { //<--closest static element rather than document
                e.preventDefault();
                // $(this).dialog('destroy').remove();
                $(this).closest(".dialog1").dialog("close");
            });

webmonkey · Accepted Answer · 2013-05-08 09:34:27Z

0

Please consider using the following code:

$("<div></div>")
    .addClass("dialog1")
    .attr("id", $(this).attr("id"))
    .appendTo("body")
    .css("background-color","red")
    .dialog({
            ...

Important is the .css("background-color", "red")line.

answered May 8, 2013 at 9:34

webmonkey

1,0931 gold badge17 silver badges35 bronze badges

Comments

Jayendra · Accepted Answer · 2013-05-08 09:35:41Z

0

You can make a change in the css itself

e.g. .ui-dialog {background:yellow}

answered May 8, 2013 at 9:35

Jayendra

52.8k4 gold badges83 silver badges90 bronze badges

Comments

Ganesh Bora · Accepted Answer · 2013-05-08 09:37:07Z

0

simplest way is to override the jquery dialog background property as below

.ui-dialog .ui-dialog-content {
        background: red;
    }

answered May 8, 2013 at 9:37

Ganesh Bora

1,1539 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to apply background-color css for jquery dialog

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related