GWT 没有为 DialogBox 提供任何样式,没有任何样式它看起来很糟糕。有没有一些简单的方法来获得类似于 GWT showcase page 上显示的内容? ?
最佳答案
事实证明,解决方案非常简单。在您的主 HTML 文件中包含以下 CSS,然后下载 http://gwt.google.com/samples/Showcase/showcase/gwt/clean/images/hborder.png , http://gwt.google.com/samples/Showcase/showcase/gwt/clean/images/vborder.png和 http://gwt.google.com/samples/Showcase/showcase/gwt/clean/images/circles.png进入您的项目。
.gwt-PopupPanelGlass {
background-color: #000;
opacity: 0.3;
filter: alpha(opacity=30);
}
.gwt-DialogBox .Caption {
background: #F1F1F1;
padding: 4px 8px 4px 4px;
cursor: default;
font-family: Arial Unicode MS, Arial, sans-serif;
font-weight: bold;
border-bottom: 1px solid #bbbbbb;
border-top: 1px solid #D2D2D2;
}
.gwt-DialogBox .dialogContent {
}
.gwt-DialogBox .dialogMiddleCenter {
padding: 3px;
background: white;
}
.gwt-DialogBox .dialogBottomCenter {
background: url(images/hborder.png) repeat-x 0px -2945px;
-background: url(images/hborder_ie6.png) repeat-x 0px -2144px;
}
.gwt-DialogBox .dialogMiddleLeft {
background: url(images/vborder.png) repeat-y -31px 0px;
}
.gwt-DialogBox .dialogMiddleRight {
background: url(images/vborder.png) repeat-y -32px 0px;
-background: url(images/vborder_ie6.png) repeat-y -32px 0px;
}
.gwt-DialogBox .dialogTopLeftInner {
width: 10px;
height: 8px;
zoom: 1;
}
.gwt-DialogBox .dialogTopRightInner {
width: 12px;
zoom: 1;
}
.gwt-DialogBox .dialogBottomLeftInner {
width: 10px;
height: 12px;
zoom: 1;
}
.gwt-DialogBox .dialogBottomRightInner {
width: 12px;
height: 12px;
zoom: 1;
}
.gwt-DialogBox .dialogTopLeft {
background: url(images/circles.png) no-repeat -20px 0px;
-background: url(images/circles_ie6.png) no-repeat -20px 0px;
}
.gwt-DialogBox .dialogTopRight {
background: url(images/circles.png) no-repeat -28px 0px;
-background: url(images/circles_ie6.png) no-repeat -28px 0px;
}
.gwt-DialogBox .dialogBottomLeft {
background: url(images/circles.png) no-repeat 0px -36px;
-background: url(images/circles_ie6.png) no-repeat 0px -36px;
}
.gwt-DialogBox .dialogBottomRight {
background: url(images/circles.png) no-repeat -8px -36px;
-background: url(images/circles_ie6.png) no-repeat -8px -36px;
}
* html .gwt-DialogBox .dialogTopLeftInner {
width: 10px;
overflow: hidden;
}
* html .gwt-DialogBox .dialogTopRightInner {
width: 12px;
overflow: hidden;
}
* html .gwt-DialogBox .dialogBottomLeftInner {
width: 10px;
height: 12px;
overflow: hidden;
}
* html .gwt-DialogBox .dialogBottomRightInner {
width: 12px;
height: 12px;
overflow: hidden;
}
关于java - 如何设置 GWT 对话框的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12243120/