Close Model window when clicked outside of Model window

Vaadin 6 / 7 / 8 Framework UI
1

Hi All

I have a model window which gets opened when i clicked on a Table column. My requirement is that I need to close this pop up model window when the user clicks any where
Out side of the Model window. Just as how it is done in any face book page when we see any photo’s. Could you suggest how this can be achieved using VAADIN.



final Window popupRiskDataWindow = new Window();
		popupRiskDataWindow.setModal(true);
		popupRiskDataWindow.setDraggable(false);
		popupRiskDataWindow.setResizable(false);
		popupRiskDataWindow.setScrollable(true);
		popupRiskDataWindow.setClosable(true);
		popupRiskDataWindow.center();
		popupRiskDataWindow.addStyleName("HCMUThreatInfo");
		popupRiskDataWindow.addComponent(riskData);
		final VerticalLayout content = (VerticalLayout) popupRiskDataWindow
				.getContent();
		content.setSizeUndefined();
		content.setMargin(false, true, true, true);

		// Add window closing listener
		popupRiskDataWindow.addListener(new Window.CloseListener() {

			private static final long serialVersionUID = 2903662733997645927L;

			@Override
			public void windowClose(final CloseEvent e) {
				// Remove the pop up window and navigate to client view
				for (Window w : app.getMainWindow().getChildWindows()) {
					app.getMainWindow().removeWindow(w);
				}
				presenter.navigateToClientView(task);
			}
		});
		app.getMainWindow().addWindow(popupRiskDataWindow);

The pop up window has a close button but it should also close when clicked any where outside of it.

Regards
Ajay

2

Any suggestions please…

3

Hi,

Sub-windows don’t support such functionality. Maybe you could use a PopupView instead of a modal Window, see this example:
http://demo.vaadin.com/sampler#PopupViewClosing
.

-Henri

4

i have an idea, use javascript global click event. To check if u click on the window, if not, go to server and close the window.

5

Any updates on this? I think modal windows that automatically closes on click outside of the window is a crucial requirement in modern web apps.

Afaik it is still not possible, isn’t it?

6

I found a solution for your issue:
First: When you open the window use this:

yourWindow.focus(); Second: add on blur listener to your window and when on blur event occurs close the window,

yourWindow.addBlurListener(new BlurListener() {

            @Override
            public void blur(BlurEvent event) {
                yourWindow.close();

            }
        });
7

Thanks Kareem Jabr. Solved my problem.

8

I didn’t find any
addBlurListener
 method. I used this code:

window.addListener(new BlurListener() {

            @Override

            public void blur(BlurEvent event) {

                getParent().getWindow().removeWindow(window);

            }

        });
9

This is perfect. Thanks!

10

It’s really useful! Thanks.
But only works if you don’t add some focusable components to the Window, it will close.
I added some buttons to the window and each time I click on them the window closes and the action is not executed.

Is there a way where even if you focus some component inside the window dont lose the window focus?

11

Hi everyone, can i use this code for SideMenu component? When i open menu and click outside of menu its not closing…

import org.vaadin.teemusa.sidemenu.SideMenu;

Tx guys

12

There is one problem with this approach: In my scenario, I have buttons inside the window. Now when clicking on these buttons, the blur event on the window happens before the button gets the click event, thus the action is not executed.

I think this is because the window is closed before button can even receive the click event. I was seeing messages like this:

com.vaadin.client.communication.MessageSender WARNING: All RPCs filtered out, not sending anything to the server

13

Probably this Hinders you…!!

popupRiskDataWindow.setModal(true); // set it to false if you dont want to blur the background and your work will also be done