A modal dialog is a dialog that takes focus, and disables the rest of the application until it is closed. They are used to force the user to acknowledge something, or to gather some input. It is worth pointing out that modal dialogs can be annoying for users so you should consider carefully if it is absolutely necessary. User Account Control (UAC) in Windows Vista and Windows 7 is an example of an annoying usage of modal dialogs.
The dialog widget is usually configured by passing the dialog() method an anonymous object containing a set of key value pairs that describe the options required. The anonymous object is created using javascript’s object literal notation. My favourite javascript author, Douglas Crockford, describes the notation:
var myObject = {
firstProperty: 'value 1',
secondProperty: 2
};<!-- See part 1 for html preamble -->
<body>
<p>Some text on the page.</p>
<div class="make_me_a_dialog">Content of div</div>
<script type="text/javascript">
$(document).ready(function() {
$('.make_me_a_dialog').dialog({ bgiframe: true,
height: 200,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
}
});
});
</script>
</body>
</html>