Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change background color of jQuery UI Dialog?

I am having tough time figure out how to change background color of jQuery UI Dialog.

I've seen many reference how to change/remove title bar but not entire background including those curvy corner.

Here is my try:

http://jsfiddle.net/dEvKb/11/

The problem is .ui-widget-content only applies to square area within the dialog but not including curvy corner.

I found a class .ui-corner-all class hoping it will color the entire background but only half of the dialog is colored. (you can see this in the jsfiddle)

Has anyone done this before?

like image 694
Meow Avatar asked Feb 22 '12 06:02

Meow


People also ask

How to change background color of jQuery dialog?

Right-click on the tooltip and choose "inspect". Scroll down in the "Styles" tab until you find the attribute you care about ( background-color ). You can click on the value and type in a new value to verify that it will have the effect you desire.

How can set background color in jQuery?

To add the background color, we use css() method. The css() method in JQuery is used to change style property of the selected element. The css() in JQuery can be used in different ways. The css() method can be used to check the present value of the property for the selected element.

What is jQuery ui dialog?

The jQuery UI dialog method is used to create a basic dialog window which is positioned into the viewport and protected from page content. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default. Syntax: You can use the dialog ()method in two forms: $(selector, context).


1 Answers

you can use this way

http://jsfiddle.net/dEvKb/15/

You should set to all class background with use !important.

.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}​

like image 78
sinanakyazici Avatar answered Sep 25 '22 07:09

sinanakyazici