必须先下载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-----------------------------------
883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
