Setting the z-index order of dialogs
The dialog is made so that it appears above any of the existing page content. We can alter its z-index setting using CSS, or by ensuring it is correctly appended to its parent element using the appendTo option, in case we need to raise it slightly to cover our existing content. But what if we have two dialogs on the page? Do we need to separately define zIndex for each dialog? How is focus taken into consideration?
Let's see if we can answer these questions by looking at another example; change the <body> tag of dialog7.html so that it has two dialog boxes on it:
<div id="dialog1" title="Dialog 1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam aculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. </div> <div id="dialog2" title="Dialog 2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin...
