<!-- 基础类库 -->
<SCRIPT type="text/javascript" src="js/jquery-1.4.4.min.js"></SCRIPT>
<!-- 布局的基本类库(不涉及到布局不需要)-->
<SCRIPT type="text/javascript" src="js/jquery.layout.js"></SCRIPT>
<!-- ui的样式表 -->
<link type="text/css" href="css/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<!-- ui的类库 -->
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(function () {
//制定某个div的id 将其作为 Dialog
$('#helpdialog').dialog({
//是否创建就打开对话框,也就是是否页面一打开就显示对话框
autoOpen: false,
/*是否需要解决无法覆盖IE6 select 元素无法被覆盖的bug
就是在IE6下 div无法覆盖<select></select> 是否使用那该属性解决
*/
bgiframe:true,
//设置对话框宽度
600,
//设置对话框高度
height: 260,
/*
设置对话框底部的按钮
*/
buttons: {
"确定": function() {
//单击按钮后的回调函数,就是按钮被单击后的响应事件
$(this).dialog("close");
}
/*
"取消": function() {
$(this).dialog("close");
}
*/
},
/*
是否为对话框添加ESC快捷键
*/
//closeOnEscape: false,
//对话框是否可以被拖动
draggable:false,
//打开对话框时是否使用特效
show:"slide",
//关闭对话框时是否使用特效动画
hide: "slide",
//是否可以调整对话框的大小
resizable:false,
//调整对话框的高度和宽度极限值(当resizable:true时)
//maxHeight:520
//maxWidth:620
//minHeight:320
//minWidth:220
//是否为模态窗口,设置为 true 时,页面上其它元素将被覆盖且无法响应用户操作。也就是无法再主界面上进行其他操作
modal:true,
//是否可覆盖其它对话框
//stack:false
//对话框标题(也可以再div的title上进行设置)
title:"请登陆"
//设置对话框 CSS z-index 值
//zIndex:50
});
// 对话框的打开连接
$('#helpdialog_link').click(function(){
$('#helpdialog').dialog('open');
return false;
});
});
</SCRIPT>
<BODY>
<a href="#" id="dialog_link">从此处打开对话框</a></span>
<div id="helpdialog" title="对话框的标题">
<p>对话框的内容</p>
</div>
</BODY>