Analysis on the style setting of jquery UI Dialog _jquery

Recently in the use of a jquery UI dialog plug-ins, feel particularly powerful, but the style settings are more troublesome, studied two days finally finished.

To run the plug-in, you need the following environment

<script src= ". /.. /js/jquery-1.4.2.js "type=" Text/javascript "></script>

<script src= ". /js/jquery.ui.js "type=" Text/javascript "></script>

<link href= "Css/themes/redmond/jquery.ui.all.css" rel= "stylesheet" type= "Text/css"/>

Jquery.ui.all.css for the start style of CSS, with Firefox open view, floating layer title below,

<span id= "Ui-dialog-title-divshow" class= "Ui-dialog-title" unselectable= "on" style= "-moz-user-select:none;" > People a stop tips </span>

is actually a span, then according to this class Ui-dialog-title we go to the official website of the CSS directory to find jquery.ui.dialog.css file find classui-dialog-title this CSS style.

. ui-dialog. ui-dialog-title {font:62.5% "Trebuchet MS", sans-serif;font-weight:bold;float:left margin:. 1em 16px. 1em 0; HEIGHT:15PX}

Modify the CSS to achieve the head style of the floating layer we want.

Background setting for header:

. ui-widget-header {border:1px solid #aaaaaa; background: #cccccc URL (images/ui-bg_highlight-soft_75_cccccc_1x100.png ) 50% 50% repeat-x; Color: #222222; Font-weight:bold; }

You can remove the background picture and set it to the background color

. ui-widget-header {border:1px solid #aaaaaa; background-color:red; color: #222222; font-weight:bold;}

About the icon settings for the X and lower right corners:

icon. ui-icon {width:16px; height:16px; Background-image:url (images/ui-icons_222222_256x240.png);}