0

I'm looking for a solution for displaying an overlay which should prevent userinteraction. I want to start an upload and force the user to wait until it is finished. After finishing the overlay should be removed.

Background:

I'm using Apache Wicket (Java) to build my webapplication. The dialog for upload is in a ModalWindow. After submitting the Form in the ModalWindow (upload), the overlay should be shown and prevent user interaction and display some kind of a message.

Any smart ways to do that? Maybe a Wicket way or a plain javascript one?

DaUser
  • 357
  • 3
  • 5
  • 19
  • Only client-side solutions make sense. And note that there's really nothing you can do to prevent the user from closing the browser window (among other things). – Pointy Feb 20 '15 at 14:09
  • Oh, and the general solution is to have a (partially, maybe) transparent element that covers everything on the viewport. Exactly how to do that depends on the specifics of the page layout and on how many browsers/devices it needs to support. – Pointy Feb 20 '15 at 14:11

2 Answers2

0

We use the jQuery BlockUI plugin for that. We embed it in a IAjaxCallListener. In the before handler we block the UI and in the complete handler we release the blocking. However it does not work well with Wicket's modal windows.

Robert Niestroj
  • 15,299
  • 14
  • 76
  • 119
0

Here is some code that Apache Isis uses for this: https://github.com/apache/isis/blob/839df6a389949957982543f3f715f35d81437e62/core/viewer-wicket-ui/src/main/java/org/apache/isis/viewer/wicket/ui/pages/jquery.isis.wicket.viewer.js#L88-L96 It shows a veil that covers the whole page whenever an Ajax call is triggered. The veil is not being shown only if the clicked Ajax component has CSS class "noVeil".

And the CSS for the veil is at: https://github.com/apache/isis/blob/839df6a389949957982543f3f715f35d81437e62/core/viewer-wicket-ui/src/main/java/org/apache/isis/viewer/wicket/ui/pages/bootstrap-overrides.css#L46-L59

martin-g
  • 17,243
  • 2
  • 23
  • 35