jQuery Dialog example

this dialog example should replace the Prototype ModalBox (okonet.ru) which is used along our customers pages.

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<div id="msg">Dialog closed</div>

CSS

body {
    font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif;
}
.ui-dialog-osx {
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    border-width: 0 8px 8px 8px;
}
#msg {
    margin-top:100px;
    text-align:center;
    font-size:2em;
    color:red;
}

JavaScript

$('<div></div>').appendTo('body')
    .html('<div><h6>Yes or No?</h6></div>')
    .dialog({
    modal: true,
    title: 'message',
    zIndex: 10000,
    autoOpen: true,
    width: 'auto',
    resizable: false,
    buttons: {
        Yes: function () {
            doFunctionForYes();
            $(this).dialog("close");
        },
        No: function () {
            doFunctionForNo();
            $(this).dialog("close");
        }
    },
    close: function (event, ui) {
        $(this).remove();
    }
});
$('#msg').hide();

function doFunctionForYes() {
    alert("Yes");
    $('#msg').show();
}

function doFunctionForNo() {
    alert("No");
    $('#msg').show();
}