Brief analysis of style setting of JQuery UI Dialog

Recently, I was working on a JQUERY UI Dialog plug-in, which felt particularly powerful, but the style setting was a bit of a hassle. After two days of research, I finally got it done.

To run the plug-in, the following environment is required

< Script SRC = ".. /.. / JS/jquery - 1.4.2. JS "type =" text/javascript "> < / script>

< Script SRC = ".. / JS/jquery. UI. JS "type =" text/javascript "> < / script>

< The link href = "CSS/themes/Redmond/jquery. UI. All the CSS" rel = "stylesheet" type = "text/CSS" / >

Jquery. Ui.all.css to launch the CSS style, open it with firefox to view, the floating layer title is as follows,

< Span id=" ui-dialog-title-divshow "class="ui-dialog-title" unselectable="on" style="-moz-user-select: none;" > People's govhk prompt < / span>

It's just a span, so according to this class ui-dialog-title ; We'll go to the CSS directory on the website and find jquery. Ui.dialog.css and look for classuia-dialog-title ; This CSS style.

Ui-dialog.ui-dialog-title {font: 62.5% "Trebuchet MS", sans-serif; The font - weight: bold; Float: left; Margin:.1em 16px.1em 0; Height: 15 px}

Changing this CSS gives you the header style you want for the floating layer.

Background setting of header:

. Ui-widget-header {border: 1px solid #aaaaaa; Background: # CCCCCC url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) Color: # 222222; The font - weight: bold; }

Can remove the background picture set to the background color

. Ui-widget-header {border: 1px solid #aaaaaa; Background - color: red; Color: # 222222; The font - weight: bold; }

About x and the lower right corner of the icon Settings:

Ui-icon {width: 16px; Height: 16 px; Background - image: url (images/UI - icons_222222_256x240. PNG); }