Style setting of JQuery UI Dialog
This article mainly analyzes and introduces the style setting problem of UI Dialog in JQuery in detail. If you need it, you can refer to it for help.
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 );}