Presenting Modal Dialogs in HTML5

The PureWeb server expects to receive a regular stream of traffic from the client, even if this is just the automatically generated keep-alive signal. In JavaScript, it is possible to inadvertently block calls from the client to the server when using synchronous calls such as alert and prompt. This is because JavaScript is a singly-threaded programming language (ignoring the use of WebWorkers).

Halting the execution of the client because of a modal prompt will lead the server to think that the client has unexpectedly disconnected from the server. This will terminate the session associated with the blocking client (unless a non-blocked collaborator is also present within the same session).

To avoid this, the best practice for presenting a modal dialog to users in an HTML5 client is using CSS overlays. We encourage you to consider using the modal dialogs included in third-party libraries such as Twitter bootstrap or JQuery UI.

In the sample HTML5 Scribble and Asteroids clients, we purposely break this rule when displaying the Share URL dialog box for collaboration, for the sake of keeping the sample code generic by not using any specific third-party library.

This is not best practice, and you may notice that the session disconnects if the dialog box is left open for more than a few seconds.