I am working on a problem where we need to show the users a preview of an image through a modal. We want them to have the maximum possible view within a modal and not create a separate page for that. So my question is, what should be the maximum modal size in % to the size of the screen?
The size of the modal shouldn’t be too large, and shouldn’t take the entire screen. Ideally, it shouldn’t take more than 20% - 25% of the screen on large windows, and 50% on tablets - these are the recommendations I always found and the values I noticed in frameworks like Carbon design system or Bootstrap use.
By restricting the size of modals, and by keeping what the user was doing previously behind a translucent background, you can keep the disruption to a minimum.
*A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision.
Dialogs should maintain a minimum 48dp distance from the leading and trailing edges of a screen. On small screens, dialogs scale vertically until reaching 48dp from the screen’s top and bottom edge. On larger displays, dialogs can increase in size to a maximum width of 560dp. When a dialog reaches the maximum width, it expands or contracts vertically to support content, up to a maximum height of 560dp.