UI Dialog with Footer

UI Dialog with Footer

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css">
<div id="popup">
    <p>TITLE</p>
    <p>This is an example of the dialog box with a footer and content styled with UI and CSS</p>
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" id="dialog_footer">FOOTER CONTENT </div>
</div>

CSS

#dialog_footer {
    height: 23px;
}
p {
    margin: 10px;
}

JavaScript

$("#popup").dialog({
   modal: true,
   autoOpen: false,
   auto: true,
   dialogClass: "myDialog",
     show: 'blind',
    hide: 'explode',
                    buttons: {
                        "Ok": function () {
                           $("#popup").dialog("close");
                        }
                    }
});

$("#popup").dialog("open");

$("#dialog_footer .close").click(function(){
   $("#popup").dialog("close");return false 
});