Web Development with jQuery®

(^408) ❘ CHAPTER 17 DIALOG
odio quam, hendrerit ac, imperdiet sit amet, venenatis sed, enim.

The CSS rule for div.ui-widget-overlay is added to the style sheet that you created in Example
17-3; this fi le is available in the source materials as Example 17-4.css:
body {
font: 12px "Lucida Grande", Arial, sans-serif;
background: #fff;
color: rgb(50, 50, 50);
}
div.ui-widget-overlay {
background: rgba(255, 255, 255, 0.7);
position: fixed;
top: 0 ;
right: 0 ;
bottom: 0 ;
left: 0 ;
}
div.ui-dialog {
box-shadow: 0 7px 100px rgba(0, 0, 0, 0.6);
border-radius: 4px;
outline: none;
position: fixed;
z-index: 1000 ;
background: #fff;
}
div.ui-dialog-titlebar {
height: 23px;
background: url('images/Titlebar Right.png')
no-repeat
Then the JavaScript fi le applies the modal option to create a modal dialog:
$(document).ready(
function()
{
$('div#exampleDialog').dialog({
title : 'Example Dialog',
modal : true
});
}
);
[http://www.it-ebooks.info](http://www.it-ebooks.info)