尝试这个：
Working jsFiddle Demo http://jsfiddle.net/y6uyq/
需要了解的重要事项是：
一：你需要参考文献<head>这三个：(1) jQuery 库，(2) jQueryUI 库，(3) jQueryUI css
二：任何 div 都可以制作成对话框。 div 可以具有任何 HTML 格式和元素，包括按钮、图像、输入框等。div 及其所有格式化元素将按原样显示在对话框中。
三：通常的做法是先初始化对话框，但设置autoOpen: false,，然后你可以用 a 强制它打开('#divID').dialog( 'open' )命令。
四：单击按钮时对话框不会自动关闭。您必须使用('#divID').dialog( 'close' ) command
五：初始化对话框时可以使用许多设置。其中最有用或最有趣的是：
* 自动打开：真假，
* width:500, //注意：没有'px'
* 位置： 'top',
* 可拖动： false,
* 关闭逃逸： false
六：重新使用对话框——即替换其内容并重新打开：
$('#dlgDiv').html('<div>New stuff goes here</div>');
$('#dlgDiv').dialog('open');
七：彻底销毁对话框（允许您使用以下命令重新创建另一个 dlg）.dialog():
$('#dlgDiv').dialog('destroy');
完全工作、独立、可剪切/粘贴的示例：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
$('#thePopup').dialog({
autoOpen: false,
modal:true,
title: 'You can put any title here:',
width: 800, //default width is 300px, default height is auto
buttons: {
Giraffe: function() {
alert('You hit subMIT');
$('#thePopup').html(''); //empty dlg - always a good idea
$(this).dialog('close');
}
}
}); //END dialog init
$('#mybutt').click(function() {
$('#thePopup').html('<img src="http://placekittens.com/150/150">');
$('#thePopup').dialog('open');
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="thePopup"></div>
<input type="button" id="mybutt" value="Show the Popup" />
</body>
</html>
补充阅读：
http://salman-w.blogspot.ca/2013/05/jquery-ui-dialog-examples.html http://salman-w.blogspot.ca/2013/05/jquery-ui-dialog-examples.html
如何自定义jquery ui对话框标题颜色和字体大小？ https://stackoverflow.com/questions/13006941/how-to-customise-jquery-ui-dialog-box-title-color-and-font-size
https://www.udemy.com/blog/jquery-popup-window/ https://www.udemy.com/blog/jquery-popup-window/
如何将元素位置传递给 jquery UI 对话框 https://stackoverflow.com/questions/5966646/how-do-i-pass-a-an-element-position-to-jquery-ui-dialog
http://api.jqueryui.com/dialog/ http://api.jqueryui.com/dialog/
jQuery UI 对话框按钮文本作为变量 https://stackoverflow.com/questions/1464843/jquery-dialog-button-variable
扩展 jquery ui 对话框（添加更多选项） https://stackoverflow.com/questions/10902099/extend-jquery-ui-dialog-add-more-options
