Gray out effect with DialogBox

1,173 views
Skip to first unread message

voodoo

unread,
Jun 23, 2007, 5:30:41 AM6/23/07
to Google Web Toolkit
How can I create a gray out effect with a DialogBox? I want to achieve
something like the popup dialog used in Picasa Web Album: when the
user clicks on edit album, a modal dialog window pops up, and the
background of the whole page grays out.

http://picasaweb.google.com/home


I already know how to create a DialogBox, the question is, how do I
make the background grays out?

Adam T

unread,
Jun 23, 2007, 5:48:38 AM6/23/07
to Google Web Toolkit
Use the LightBox class from the GWT Widget Library (http://gwt-
widget.sourceforge.net/docs/apidocs/index.html)

//Adam

Ping

unread,
Jun 24, 2007, 6:39:45 PM6/24/07
to Google Web Toolkit
If you cannot use a non-core widget, you can create a fullscreen div
and apply transparency to it, and render you dialog box on top of it.

Ping

unread,
Jun 24, 2007, 7:10:12 PM6/24/07
to Google Web Toolkit
If you cannot use a non-core widget, you can create a fullscreen div
and apply transparency to it, and render you dialog box on top of it.

On Jun 23, 10:30 am, voodoo <looks.like...@gmail.com> wrote:

Alex

unread,
Aug 8, 2007, 10:53:42 PM8/8/07
to Google Web Toolkit
Try the ModalDialog from the 3rd party GWT Tk lib.

Fred Sauer

unread,
Jan 23, 2008, 11:07:44 AM1/23/08
to Google-We...@googlegroups.com
Now there's also the incubator glass panel:
  http://code.google.com/p/google-web-toolkit-incubator/wiki/GlassPanel

Chinmay Bajikar

unread,
Jan 23, 2008, 11:33:09 AM1/23/08
to Google-We...@googlegroups.com
Also I have seen a Dialog class with the MODAL style which will grey out the viewport
when it displays in myGWT.
You might want to have a look at the same.

Thanks,
-Chinmay

Evaldas Taroza

unread,
Feb 6, 2008, 6:01:12 AM2/6/08
to Google Web Toolkit
I have my own GlassPanel, apparently it was quite easy to implement:

/**
* This panel is positioned absolutely and covers the whole client
area of the browser.
* It can be used to disable everything underneath it with appropriate
z-index.
* <p>
* For instance a dialog can attach it to the root panel during
opening, and remove it during closing.
* <p>
* CSS:<br>
* .yanel-GlassPanel
*
* <p>
* Example:<br>
* Add and remove this widget whenever you want, and style it as
follows:
* <pre>
* .yanel-GlassPanel{
* background-color: black;
* filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;
* }
* </pre>
* */
public class GlassPanel extends Composite implements
WindowResizeListener{
public static final String STYLE = "yanel-GlassPanel";

private SimplePanel panel = new SimplePanel();

public GlassPanel(){
initWidget(panel);

panel.setStylePrimaryName(STYLE);

Window.addWindowResizeListener(this);

resize(Window.getClientWidth(), Window.getClientHeight());
}

public void onWindowResized(int width, int height) {
resize(width, height);

}

public void show(){
// Override the styles explicitly, because it's needed every
time the widget is detached
DOM.setStyleAttribute(panel.getElement(), "left", "0");
DOM.setStyleAttribute(panel.getElement(), "top", "0");
DOM.setStyleAttribute(panel.getElement(), "position",
"absolute");

RootPanel.get().add(this);
}

public void hide(){
RootPanel.get().remove(this);
}

private void resize(int width, int height){
panel.setSize(width+"px", height+"px");
}
}

This is how I avoided using external libraries ;)

Evaldas

Juan Sebastian Marulanda

unread,
Jul 8, 2013, 10:56:54 AM7/8/13
to google-we...@googlegroups.com, Google Web Toolkit
hola, Debes tener este estilo en tu css, automaticamente gwt lo tomara cuando agregas .setGlassEnabled(true); a tu dialogBox!

.gwt-PopupPanelGlass {
  background-color: #000;
  opacity: 0.5;
  filter: alpha(opacity=30);

Thomas Broyer

unread,
Jul 8, 2013, 5:58:43 PM7/8/13
to google-we...@googlegroups.com, Google Web Toolkit
Congrats, you earn the "necromancer" badge for replying to a question more than 6 years after it's been asked! ;-)
Reply all
Reply to author
Forward
0 new messages