Modal-Dialog-Test

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">

CSS

.odd { border: 1px solid black; background: #FFFFAA; }
.even { border: 1px solid black; background: #FFAAAA; }
a { text-decoration: underline; cursor: pointer; }

JavaScript

function openDialog(iNr) {
    var link = $('<a>').on('click', {
        i: iNr
    }, function(ev) {
        openDialog(ev.data.i + 1);
    }).text('open Dialog ' + (iNr + 1));
    $('<div>').dialog({
        modal: true,
        title: 'Dialog ' + iNr,
        dialogClass: ((iNr % 2) ? 'odd' : 'even'),
        width: 500 - (iNr - 1) * 50,
        height: 400 - (iNr - 1) * 50
    }).append(link);
}
openDialog(1);