Question

我正在GWT中创建一个弹出面板，以在RPC操作运行时显示加载CSS动画。为此，我使用uiBinder元素创建了一个弹出面板。因此，一切都工作正常，但我不知道如何摆脱“围绕”我的弹出面板的白框。让我告诉你：

enter image description here

我想要达到这个目标：

enter image description here

好的，让我告诉你弹出式面板中的代码......

public class LoadingDialogMessage extends PopupPanel {

private static LoadingDialogMessageUiBinder uiBinder = GWT.create(LoadingDialogMessageUiBinder.class);

interface LoadingDialogMessageUiBinder extends UiBinder<Widget, LoadingDialogMessage> {}

public LoadingDialogMessage() {
    setWidget(uiBinder.createAndBindUi(this));
    setAutoHideEnabled(true);
    setGlassEnabled(true);
    center();
}
}

以下是我的ui.xml文件中的代码：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
 <g:HTMLPanel styleName="loading_container">
    <label class="loading_label">Loading info from itsaseus buoys</label>
    <div class="bubblingG">
        <span id="bubblingG_1">
        </span>
        <span id="bubblingG_2">
        </span>
        <span id="bubblingG_3">
        </span>
    </div>
</g:HTMLPanel> 
</ui:UiBinder>

相关的CSS：

.loading_label{
color:#ffffff; 
font-size: 85%; 
text-align: center; 
text-decoration: none; 
/*  font-stretch: condensed;  */
font-weight: bold; 
font-family: Helvetica, Arial, sans-serif;
}
.loading_container{
height: 100%;
background: #3a9bff;
    padding: 0.5em; 
text-align: center;
border:3px solid;
border-color: #4452ED;
/* border-radius */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;    
}

自动为此page的加载动画生成其余的CSS。我不认为他们与它无关，因为如果我删除那些使用这些风格的div，问题仍然存在..

有谁知道如何摆脱这个白框？我对CSS并不擅长，这太奇怪了......我尝试了很多调整，但都没有用......

谢谢！亚历

编辑：正如所建议的那样，我在主css文件中创建了一个新类：

.loading_panel{
border: none;
background: transparent;
}

修改了ui.xml：

     <g:HTMLPanel>
        <div class="loading_container">
        <label class="loading_label">Loading info from itsaseus buoys</label>
        <div class="bubblingG">
            <span id="bubblingG_1">
            </span>
            <span id="bubblingG_2">
            </span>
            <span id="bubblingG_3">
            </span>
        </div>
        </div>
</g:HTMLPanel>

当我创建弹出窗口时，我正在关联该样式：

        m = new LoadingDialogMessage();
    m.addStyleName("loading_panel");
    m.show();

这是生成的HTML代码：

<div class="gwt-PopupPanel loading_panel" style="left: 649px; top: 444px; visibility: visible; position: absolute; overflow: visible;">
        <div class="popupContent"><div>
            <div class="loading_container"> 
                <label class="loading_label">Loading info from itsaseus buoys</label> 
                    <div class="bubblingG"> 
                        <span id="bubblingG_1"> </span> 
                        <span id="bubblingG_2"> </span> 
                        <span id="bubblingG_3"> </span> 
                    </div> 
                </div>
            </div>
        </div>
    </div>

虽然添加了loading_panel样式，但GWT正在添加gwt-PopupPanel样式，同时也是：

style="left: 649px; top: 444px; visibility: visible; position: absolute; overflow: visible;"

看起来addStyleName根本没有覆盖......

Answer 1

你需要覆盖像bellow一样的css类。

.gwt-PopupPanel {
    border: none !important;
    background: none !important;
 }

Answer 2

您应该添加适用于无边框弹出窗口的CSS。然后将此css应用于您在该样式中所需的所有弹出窗口。避免在你的CSS中使用！important：你只能做一次。因此请将其保留用于 onMouseOver 或禁用状态等特殊情况

所以概括一下： 1.创建一个特殊的弹出式样式：

.borderlessPopup {
  border: none;
  background: transparent;
}

将其应用于弹出窗口：

popup.addStyleName（ “borderlessPopup”）;

摆脱GWT弹出面板中的白框

2 个答案: