サンプル
<html>
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Dialog
$('#dialog').dialog({
modal: true,
autoOpen: false,
width: 600,
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>
</head>
<body>
<h2>DialogのHello World!</h2>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<!-- ui-dialog -->
<div id="dialog" title="Dialogのタイトル">
<p>Hello World!</p>
</div>
</body>
</html>
