jQuery的插件 --- 对话框的效果（有遮罩效果）

83457317

2012-03-28

关注关注

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'dialog.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js">
</script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">
</script>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">
<style type="text/css">
body {
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
#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>
<script type="text/javascript">
//页面加载完毕触发匿名函数
$(document).ready(function() {
//点击事件处理打开dialog
$("#dialog_link").click(function() {
//打开窗口
//alter("fdsf");//没有返回值会跳转页
$("#dialog").dialog("open");
return false;//返回值为false，不去执行<a href="#"></a>连接的操作
});
//dialog注册
//当你把$("#dialog")注册为对话框时，$("#dialog")的内容也将被隐藏掉
$("#dialog").dialog( {
autoOpen : false,//设置对话框是否打开，如果为false，则��打开，如果为true，则自动打开，默认值为fallse,文本也将被隐藏
//width:600,//宽度的设置
/*height:300*/
buttons : {
"确定" : function() {
$(this).dialog("close");
},
"取消 " : function() {
$(this).dialog("close");
}
},
bgiframe:false,
closeOnEscapt:true,//默认值是true，当按下esc键的时候关闭窗口
draggable:true, //拖拽的效果，默认是 true
show:"slide", //展开的时候显示的动画效果
hide:"slide",//关闭窗体时的效果有toggle slide
modal:true, //ture是遮罩的效果，默认的是fasle
position:"top",//弹出的对话框弹出的位置 top，left，rigth，right
title:"添加老王", //设置对话框的标题
open:function(event,ui){
alert("打开的时候触发的事件");
}
});
//添加事件
$("#dialog_link,").hover(function(){
$(this).addClass("ui-state-hover");
},function(){
$(this).removeClass("ui-state-hover");
});
});
</script>
</head>
<body>
<p>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span
class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
</p>
<div id="dialog" title="Dialog Title">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
</body>
</html>
注:遮罩效果使用的属性为：modal:true,