Html 摆脱GWT弹出面板中的白色框架

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

我想要实现的是：

好的，让我向您展示我弹出面板中的代码

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();
}
}

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> 

这是生成的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>

---

看起来addStyleName根本没有覆盖…

您需要覆盖一个css类，如bellow

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

---

您应该添加一个适合无边框弹出窗口的css。然后将此css应用于您想要的该样式的所有弹出窗口。避免使用！在css中很重要：你只能做一次。因此，在特殊情况下，如onMouseOver或禁用状态下，请保留它

因此，概括一下： 1.创建特殊的弹出式样式：

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

• 将其应用于弹出窗口：
  popup.addStyleName（“borderlessPopup”）

---

您好，我已将该css类添加到当前css文件中，并在创建弹出窗口时添加了样式，但没有效果…我仍然可以看到白色框架…看起来该样式根本没有应用于父级g:HTMLPanel…您好，您检查firebug中发生的情况了吗？（firefox插件可以查看页面的html、css和js）您应该为您的PopupPanel PopupPanel设置一个div。我们使用popupPanel.setStyleName（“categoriesPopup”）；这将完全删除默认的弹出式样式，您可以尝试从何处检查问题，但您肯定应该转到HTML结果代码，并说明发生了什么，这将正常工作。但这是一种残忍的方式！在你的css中很重要。我删除了重要的！我认为，这并不是说你需要覆盖gwt PopupPanel类是或者是…：-）好吧，所以你的所有弹出窗口都没有边框。是的，够了，像你想的那样去做哇，我刚刚添加了这个，它很有效！看起来你一定要重写gwt Popupanel类，谢谢你Mayank！！现在我真的不知道该给谁一个正确的答案：D

<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>

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

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

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