Dialog boxes - modal windows

Also referred to as an overlay

Summary

A modal window is a layer on top of a page. It simplifies the user interface by providing a way for the user to access additional information without leaving current page. It is also an effective technique to catch user’s attention

Code

Example (in use, with an interaction, in context)

 <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-describedby="reportDrilldownDlg" style="position: absolute; height: auto; width: 300px; top: 247px; left: 404px; display: block;" aria-labelledby="ui-id-5"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-5" class="ui-dialog-title">Navigate to Cost Object View</span><button class="ui-dialog-titlebar-close"></button></div><div id="reportDrilldownDlg" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 26px; max-height: none; height: auto;">
		<form>
			<label for="reportWorksetAutoComp">Enter Workset</label>
			<input id="reportWorksetAutoComp" class="ui-autocomplete-input" type="text" style="width:15em" autocomplete="off"><span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
			<label for="reportCOselect">Then Choose one of these Cost Objects</label>
			<select id="reportCOselect"></select>
		</form>
	</div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button">Go to Cost Object</button></div></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-6" tabindex="0" style="z-index: 4001; display: none;"></ul></div><div tabindex="-1" role="dialog" aria-describedby="reportDrilldownDlg" style="position: absolute; height: auto; width: 300px; top: 247px; left: 404px; display: block;" aria-labelledby="ui-id-5"><div><span id="ui-id-5">Navigate to Cost Object View</span><button></button></div><div id="reportDrilldownDlg" style="width: auto; min-height: 26px; max-height: none; height: auto;">
 </div><div><div><button type="button">Go to Cost Object</button></div></div><div style="z-index: 90;"></div><div style="z-index: 90;"></div><div style="z-index: 90;"></div><div style="z-index: 90;"></div><div style="z-index: 90;"></div><div style="z-index: 90;"></div><div style="z-index: 90;"></div><div style="z-index: 90;"></div><ul id="ui-id-6" tabindex="0" style="z-index: 4001; display: none;"></ul></div>

Example

Related patterns

Problem

There is a need to interrupt current process and focus the user’s full attention to something really important. (For example to notify the user about some major changes to your service since the last login, tell the user that his login has expired and provide a login form to let him login again, warn the user about doing something that is not reversible etc.)

You need to display user actions or other options that are “independent” from other pages.
Placing them in an overlay saves the user a return trip to another page and makes it easy to get back to the original page where he came from.
It is important to show additional or related content/options in context

Solution

When a dialog box or modal window appears on the screen, an action must be taken relating to it before you can access other applications on the computer. This focuses user attention on important information or performing an action

Child pages