SO Help: Create jQueryUI Dialog

by SpYk3

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<link rel="stylesheet" href="http://jqueryui.com/css/base.css">
<script src="http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Trebuchet+MS,+Tahoma,+Verdana,+Arial,+sans-serif&amp;fwDefault=bold&amp;fsDefault=1.1em&amp;cornerRadius=4px&amp;bgColorHeader=f6a828&amp;bgTextureHeader=12_gloss_wave.png&amp;bgImgOpacityHeader=35&amp;borderColorHeade"></script>
<div id="dialog-confirm" title="ALERT 01">
    <p style="text-align:center;"><span class="ui-icon ui-icon-alert" style="display:inline-block; margin:0px 7px 0px 0px;"></span>Are you sure?</p>
</div>

JavaScript

$( "#dialog-confirm" ).dialog({
    resizable: false,
    modal: true,
    position: "center",
    buttons: {
        "OK": function() {
            $( this ).dialog( "close" );
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});

$(function() {
    $("<div />").attr("id", "dialog-confirm").append(
        $("<p />").text('Are you sure?').css("text-align", "center").prepend(
            $("<span />").addClass("ui-icon ui-icon-alert").css({
                display: 'inline-block',
                margin: '0px 7px 0px 0px'
            })
        )
    ).dialog({
        resizable: false,
        modal: true,
        position: "center",
        title: "ALERT 02",
        buttons: {
            "OK": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
});