jQuery UI Dialog

by Hari Menon

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/ui-lightness/jquery-ui.css">
<div>
    <div id="dialog" title="Basic dialog">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    <button id="openDialog">Open Dialog</button>
</div>

CSS

button {
    position: fixed;
    right: 10px;
}

JavaScript

$(function () {
    $("#dialog").dialog({
        autoOpen: false
    });
    $("#openDialog").on('click', function () {
        $("#dialog").dialog('open');
    });
});