Home‎ > ‎UI‎ > ‎

Popup


Popup with Greying out Background

One of the ways I use Popup panel with greying out the background when it is centered. 

GlassPanel CSS

First set the CSS for the glassPanel. This will grey out the background when the popup is shown.
.gwt-PopupPanelGlass {
  opacity
:0.3;
  filter
:alpha(opacity=30);
  background
-color: grey;
}

DialogBox extends PopupPanel

I set the autoHide so a user can't click and hide it. I also set the modal to true to capture the events only in the popup. 
public class MyPopup extends DialogBox {
 
interface MyPopupUiBinder extends UiBinder<Widget, MyPopup> {}
 
private static MyPopupUiBinder uiBinder = GWT.create(MyPopupUiBinder.class);

 
public MyPopup() {
   
super(false, true);
   
    setWidget
(uiBinder.createAndBindUi(this));
   
    setGlassEnabled
(true);
 
}
}

How it Looks





Comments