<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<link type="text/css" href="./css/jquery-ui-1.8.18.custom.css" rel="stylesheet">
<script type="text/javascript" language="javascript">
//当窗体加载完毕的时候 触发该匿名函数
//$(document)//把dom对象转换成jquery对象
//$(document).ready(function (){});
$(function (){
$("#dialog").dialog({
autoOpen:false,//设置对话框打开的方式 不是自动打开
show:"blind", //打开时的动画效果
hide:"explode", //关闭时的动画效果
modal:true, //遮罩效果
/* buttons:{//添加按钮操作
"确定":function (){
$(this).dialog("close");//关闭对话框
},
"取消":function (){
alert("提交");
}
},*/
buttons:[
{
text:"ok",
click:function (){
$(this).dialog("close");//关闭对话框
}
},
{
text:"取消",
click:function (){
$(this).dialog("close");//关闭对话框
}
}
],
draggable:true, //是否可以拖动效果 true可以 false 不可以
closeOnEscape:false ,//是否使用esc键退出对话框 默认值为true
title:"天际用户操作界面",
//对话框的标题
position:"top",//对话框弹出的位置 默认center
width:600 ,//对话框的宽度
height:300,
resizable:false, //是否可以改变尺寸的操作 默认为true
zIndex:6, //层叠效果
drag:function(event,ui){
//
}
});
//触发连接的事件,当你点击链接 打开一个对话框
$("#dialog_link").click(function (){
$("#dialog").dialog("open");//open参数 作用 打开对话框
});
//获取设置的options中的参数值
var modalValue=$("#dialog").dialog("options","modal");
//alert(modalValue);
//重新设置属性
$("#dialog").dialog("options","modal",false);
});
</script>
<style>
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>
</head>
<body>
<h1>模拟dialog效果</h1>
<!--创建一个连接-->
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
<!--div 对话框 他就成了一个对话框 在页面会隐藏-->
<div id="dialog" title="hi!">hello</div>
</body>
</html>
效果图: