I do not want to write about “what is modal windows”, but focus on potential problems which may occur when you start using modal windows in some scenarios. More about modal windows you can find in article Techniques for creating modal windows.


Screenshot of My Library modal window example
Source: Screenshot of My Library modal window example

Before you create modal windows everywhere consider:

  • Provide “resize option. Otherwise customer will not be able to resize the modal window and probably some content may not be visible e.g. when user will set font size bigger.
  • Modal window can not be moved outside of browser visible area! This means that e.g. I can’t move it to the second (or any other) monitor. So, based on this point consider if you really need to put the content into modal window.
  • Take care about accessibility. Modal windows could be non-readable by screen readers because of bad code or screen readers limitations / bugs.
  • Provide support for keyboard users. Especially support for “ESC” key so that user can easy close the modal window.
  • Make sure that the close” button is clearly visible and is enough big to click on it. Often it’s a small button and even it’s very hard to use it on mobile devices with small screen.
  • Make it movable so that the user can drag and drop.


You can leave a response, or trackback from your own site.

Before you add comment see for rules.

Leave a Reply

Your email address will not be published. Required fields are marked *