jquery ui弹出div层对话框,效果预览:http://keleyi.com/keleyi/phtml/jui/dialog/index.htm
以下是完整代码，保存到html文件，打开也可以预览效果：
<!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> <title>jquery ui弹出div层对话框--柯乐义</title> <link rel="stylesheet" href="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/css/smoothness/jquery-ui.min.css" /> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> <script src="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script> <script type="text/javascript"> function keleyidialog() { $("#dialog").dialog(); } </script> <style type="text/css">#dialog{display:none;}</style> </head> <body> <div style="338px;height:100px;margin:10px auto;"><input type="button" onclick="keleyidialog()" value="点击我" /> <a href="http://keleyi.com/a/bjac/5939d3b2c920ff6d.htm" target="_blank">原文</a> <a href="http://keleyi.com/keleyi/phtml/jui/dialog/1.htm">无动画</a> <a href="http://keleyi.com/keleyi/phtml/jui/dialog/2.htm">动画</a> <a href="http://keleyi.com/keleyi/phtml/jui/dialog/3.htm">redmond</a> <a href="http://keleyi.com/keleyi/phtml/jui/dialog/4.htm">sunny</a> <br />点击按钮弹出对话框 </div> <div id="dialog" title="div层对话框"> <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> <p>柯乐义：这是一个弹出div层对话框，可用于显示信息。可以拖动和关闭这个弹出层，还可以改变它的大小。 </p> </div> </body> </html>
还有多种样式可供选择，例如eggplant或者vader等。只需将上面代码中的smoothness换掉就eggplant、sunny、redmond或者vader可以了。例如vader：http://keleyi.com/keleyi/phtml/jui/dialog/2.htm
sunny：http://keleyi.com/keleyi/phtml/jui/dialog/4.htm
jquery ui的dialog方法，有着很强大的功能，比如把上面代码中的keleyidialog函数换成以下代码则有不同效果：http://keleyi.com/keleyi/phtml/jui/dialog/1.htm
代码：
function keleyidialog() { $("#dialog").dialog({ resizable: false, height: 240, 400, modal: true, buttons: { "确定": function () { window.location.href = "http://keleyi.com"; }, "取消": function () { $(this).dialog("close"); } } }); }
参数：
resizable：是否能够改变对话框的大小（true、false）
height: 对话框的高度（240）
对话框宽度（400）
modal: 是否有遮罩层（true,false）,如果为ture，则弹出对话框时，网页中除了弹出的对话框纸袋，其他元素都被遮罩层盖住，无法操作
buttons：在对话框上显示按钮，点击按钮会执行相应方法。
参考：http://keleyi.com/a/bjac/5aed2303707e30fa.htm