Style setting of jquery UI Dialog

Recently I was using a jquery UI dialog plug-in. It felt very powerful, but style settings were troublesome. After two days of research, I finally got it done.

 

Run the plug-in. The required environment is as follows:

<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 is the startup style CSS, which can be opened in Firefox. The title of the floating layer is as follows,

<Span id = "UI-dialog-title-divshow" class = "UI-dialog-title" unselectable = "on" style = "-moz-user-select:
None; "> one-stop notification </span>

Actually, it is a span. Based on this class UI-dialog-title, we can find the CSS style of classui-dialog-title in the jquery.ui.dialog.css file on the official website.

 

. UI-dialog. UI-dialog-title {Font: 62.5% "trebuchet ms", sans-serif; font-weight: bold; float: Left; margin :. 1em 16px. 1em 0; Height: 15px}

 

You can modify this CSS to achieve the desired floating layer Header style.

 

Header background settings:

. 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 image 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 in the lower-right corner of X:

Icon. UI-Icon {width: 16px; Height: 16px; Background-image: URL (images/ui-icons_222222_256x240.png );}