<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#myDialogBoxOpener').click(function() {
$("#myDialogBox").dialog({
width: 460,
minWidth: 260,
height: 240,
minHeight: 200
});
});
});
</script>
<style type="text/css">
<!--
body {font: 80% Arial, Helvetica, sans-serif;}
#myDialogBox {display: none;}
#myDialogBoxOpener {color: #F90; font-weight: bold; cursor: hand;}
/* my custom styles */
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar {padding: .5em 1em .3em; position: relative; background:#333; color: #fff; border: 1px solid #fff; padding: 6px;}
.ui-dialog .ui-dialog-title {float: left; margin: .1em 16px .2em 0;}
.ui-dialog .ui-dialog-titlebar-close {position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span {display: block; margin: 1px; background: #333 url(demo_close.gif) no-repeat 2px 2px;}
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; background: #333 url(demo_close_over.gif) no-repeat; border: 1px solid #ccc;}
.ui-dialog .ui-dialog-content {position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane {text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {float: right; }
.ui-dialog .ui-dialog-buttonpane button {margin: .5em .4em .5em 0; cursor: pointer;}
.ui-dialog .ui-resizable-se {width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar {cursor: move; }
-->
</style>
<title>My Dialog Box Demo</title>
</head>
<body>
<div id="#myDialogBox" title="My Dialog Box Title">My Dialog Box Content</div>
<p>click <span id="myDialogBoxOpener">here</span></p>
</body>
</html>
Demonstration
click here