您的位置：首页 > Web前端 > JQuery

使用jQuery插件实现 模拟dialog的遮罩效果

2012-03-28 19:30 876 查看 

<!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" src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="javascript" src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!-- 引入css类库 -->
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript" language="javascript">
$(function (){
$("#dialog").dialog({
autoOpen:false,   //设置对话框的打开方式 不是自动打开
show:"blind",  //打开时的效果
hide:"explode" ,//关闭时的效果
modal:true ,	 //遮罩效果 false 非遮罩效果
/* buttons:{//添加按钮操作
"确定":function (){
$(this).dialog("close"); //关闭对话框
},
"取消":function (){
alert("取消的操作"); }} */
//添加
//buttons:的第二种方式
buttons:[
{
text:"ok",
click:function (){
$(this).dialog("close"); //关闭对话框
}
},
{
text:"cancel",
click:function (){
//关闭对话框
$(this).dialog("close");
}
}
],

draggable:true, //可以拖动时 true 可以拖动 默认值就是true
closeOnEscape:true, //false 是否采用esc键退出对 话框 如果true 采用esc
title:"添加用户操作界面",
position:"top", //对话框弹出的位置 可以是top left right
width:800,//对话框的宽度
height:200,
resizable:true, //是否可以改变高度
zIndex:1000,
drag:function (event,ui){
//	$("#dialog")
//对话框当前的坐标位置
}
});

//触发连接的事件，当你点击  链接 打开一个对话
$("#dialog_link").click(function (){
//open参数 作用  打开一个对话框
$("#dialog").dialog("open");
});
//我怎么获取，我设置的options中的参数值

})
</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对话框 $("#dialog").dialog(); 它就成了一个对话框 在页面中就会隐藏掉-->
<div id="dialog" title="hi" style="display:none">

hello  world!!!
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航