jquery ui彈出div層對話框,效果預覽:http:///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/pmedia/jquery/ui/1.10.3/css/smoothness/jquery-ui.min.css" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script src="http:///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="width:338px;height:100px;margin:10px auto;"><input type="button" onclick="keleyidialog()" value="點擊我" />
<a href="http:///a/bjac/5939d3b2c920ff6d.htm" target="_blank">原文</a> <a href="http:///keleyi/phtml/jui/dialog/1.htm">無動畫</a> <a href="http:///keleyi/phtml/jui/dialog/2.htm">動畫</a>
<a href="http:///keleyi/phtml/jui/dialog/3.htm">redmond</a>
<a href="http:///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/phtml/jui/dialog/2.htm
sunny：http:///keleyi/phtml/jui/dialog/4.htm
jquery ui的dialog方法，有著很強大的功能，比如把上面代碼中的keleyidialog函數換成以下代碼則有不同效果：http:///keleyi/phtml/jui/dialog/1.htm
代碼：
function keleyidialog() {
$("#dialog").dialog({
resizable: false,
height: 240,
width: 400,
modal: true,
buttons: {
"確定": function () {
window.location.href = "http://";
},
"取消": function () {
$(this).dialog("close");
}
}
});
}
參數：
resizable：是否能夠改變對話框的大小（true、false）
height: 對話框的高度（240）
width: 對話框寬度（400）
modal: 是否有遮罩層（true,false）,如果為ture，則彈出對話框時，網頁中除了彈出的對話框紙袋，其他元素都被遮罩層蓋住，無法操作
buttons：在對話框上顯示按鈕，點擊按鈕會執行相應方法。
參考：http:///a/bjac/5aed2303707e30fa.htm