Modal presentation

Entering a modal context is a change of place, and the motion that performs it is doing a specific job: it has to say this is on top of what you were doing, it is temporary, and you are getting the other thing back. The vocabulary is remarkably stable across platforms. Something arrives from an edge or grows in the centre, it comes with a scrim, and the screen behind it dims and usually recedes slightly rather than disappearing. That surviving glimpse of the previous screen is the whole argument: a full replacement would read as navigation, and navigation does not promise to give anything back.

The three common presentations answer three different sizes of task. A sheet rises from the bottom edge and stops short of the top, which is the honest shape for a task that is smaller than the screen and expects to be dismissed quickly. A centred zoom and fade is for a decision rather than a task, which is why alerts use it and why it is the shape people mean when they say modal dialog. A full-screen cover is for a task that deserves the whole screen and has its own internal navigation. A bottom sheet is the component that first presentation produces, with detents and a drag handle of its own; this term is how it got there.

The rule that keeps all three coherent is that the way out mirrors the way in. A sheet that rose from the bottom leaves through the bottom, a zoom shrinks back into the middle, and a cover slides down the way it came. Reversing the entrance animation is not decoration: the exit animation is what tells the reader that the thing they closed went back where it came from and that nothing else changed underneath. A dismissal that fades out when the entrance slid up leaves people checking whether the screen behind is the one they left. On the web the whole family belongs in the top layer, through a dialog element or the popover attribute, so the presentation is painted above the page rather than fighting it for stacking order.

Three details make or break it. Give the modal a dismissal that does not depend on a gesture: an explicit close control as well as a swipe, since the swipe is a pointer idiom and the Escape key is a keyboard one. Keep the transition short, around a quarter of a second, because it stands between the reader and the task they asked for. And be careful presenting a modal from a modal: the second presentation has no room left to recede into, which is usually a sign the first one should have been a screen.