必須先下載Jquery UI插件
然後再把下載的文檔複製到項目中，可以複製你需要的單個插件
--------------------------------------具體代碼如下--------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> //這個必須在前面，否則沒效果
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
<script src="js/jquery-ui-1.7.3.custom/development-bundle/ui/minified/ui.dialog.min.js"
type="text/javascript"></script>//網上下載的ui插件中的dialog
<link href="js/jquery-ui-1.7.3.custom/development-bundle/themes/base/ui.all.css"
rel="stylesheet" type="text/css" /> //插件自帶的css，我們主要把它拖到代碼中
<title>Jquery UI 彈出層應用示例</title>
<script type="text/javascript">
$(function () {
$("#div1").hide();//先隱藏要彈出的div
$("#Button1").click(function (event) {//給按鈕綁定事件
$("*").stop();//停止所以操作
event.stopPropagation();
$("#div1").dialog({ modal: true });//這裏是模型框，不能操作其他，則彈出之後Button2不能操作。如果可以操作Button2事件則$("#div1").dialog);就可以咯
$("#div1").dialog("open");//彈出div,open爲彈出，close爲關閉
});
$("#Button2").click(function (event) { $("#div1").dialog("close"); })//關閉
$("#a1").click(function (envent) {
$("#div1").dialog("close");//關閉
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-widget ui-widget-content ui--corner-all" style=" width:750px; padding:5xp;">
<h1>Demo.每個層都彈出不同的內容</h1>
<input id="Button1" type="button" value="彈出層" /><input id="Button2" type="button"
value="關閉層" />
</div>
<div id="div1" style="width:400px; height:150px" title="自定義標題">
<p>彈出層</p>
<a id="a1" style="" href="#">關閉</a>
</div>
</form>
</body>
</html>
====================如有錯誤，請多多指教==========================
-----------------------------待續 ehtan-----------------------------------