5

I use a lot of jquery modal dialog windows. I normally try to make sure they are not that tall but I am not sure how much height they should take up. My UI is generally designed for 1024X768 or higher so I never go more than 960px for the width but I am not sure what the max height I should use for modal windows.

A lot of it depends on the user's computer; like if they are on a PC and they have a task bar or if they have a extra stuff on their browser bar.

Anyone have an suggestions or tips about how the height for a modal window?

3 Answers 3

10

Ideally the modal is as tall as need be to contain its contents, but no taller. And that the viewport is taller than the modal.

Now, if you're running into situations where you have so much content in the modal that the modal has to be taller than the viewport, then you have two options:

  1. let the page or modal scroll

  2. rethink using a modal in this situation.

I'd lean towards #2 being the best choice most of the time. If you're running into spacing issues with content in modals, then you probably are trying to display too much content in a modal to begin with and it's likely that the better solution is making it a separate page.

1
  • 4
    +1 for rethinking the modal entirely. If you modal takes up the whole screen and still doesn't fit everything, just make it its own page. Dec 14, 2012 at 0:03
0

First, you should generally be thinking of a percentage of the availible space for a maximum, rather than a set number of pixels. For a minimum, pixel count is more understandable as there may be a minimum amount of data you need to present.

As for how big is too big, it all depends on what you're doing. If your modal requires any sort of information on the "lower" pane, the modal should ideally be as small as possible and movable, a good example of this is the "post tweet" modal on Twitter's web app.

Modals are generally supposed to be small, focused tasks where other information is unnecessary; confirmation dialogs, log in screens and similar. As such they should almost always be as small as possible.

I do however disagree that modals should never ever cover most of the screen; the Print modal in Google Chrome is a great example of a full-screen modal. The Print Screen shows a full preview of how the page will print and gives a sidebar full of options; in this case being able to see the main page is more of a distraction than anything. This is a pretty rare case, and generally modals should be much less than all of the screen, but it can make sense.

If you do need to make an almost full screen modal, do consider if it should be it's own page rather than a modal; in the Chrome example it makes sense that it's a modal. Chrome's Print dialog is completely tied to the current page. If this is not the case and instead the modal is a completely separate and complex page it may need it's own page rather than a second level modal. But it's hard to recommend which is better without more specific details of your use case.

0

At first, I began to display modal dialogues with a fixed size, but last months I've been designing my web application with a more sensitive layout (same html+css for PCs, tablets and smartphones), so decided to take a very different approach: fixed margins and max/min heights and widths, with vertical scroll bars when needed, and horizontal scroll bars avoided when possible.

But, as @DA01 and @BenBrocka said, if your modal dialog is too big, it probably shouldn't be a modal dialog. I had to learn to no being afraid of rethinking when needed, specially while there still is time for doing it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.