jQuery的插件 --- 对话框的效果 (有遮罩效果)

原创 2012年03月26日 23:26:15
jQuery的插件 --- 对话框的效果 (有遮罩效果)
<%@ 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,

相关文章推荐

jQuery插件 实现图片文字遮罩效果

  • 2010年07月02日 09:39
  • 386KB
  • 下载

JqueryUI插件dialog实现遮罩的效果

JqueryUI插件dialog实现遮罩的效果 通过简单的学习了JqueryUI插件的一些内容,对于dialog对话框效果我们也有了一些简单的了解。那么,我来给大家介绍一下使用jqueryUI di...

jQuery插件ccdialog 功能齐全的对话框效果【原创】

ccdialog是一个jQuery插件,实现弹出层模式的对话框效果,由于不满足于jQuery本身的dialog插件功能和效果,所有参考了众多dialog插件的效果和实现方式写了ccdialog,功能和...

JS弹出可移动的DIV对话框透明遮罩效果

弹出提示    * {margin:0;padding:0;font-size:12px;}  html,body {height:100%;width:100%;}  #content {b...

jQuery遮罩效果

最近开发了一套jquery遮罩效果,由于从来没总结过,所以还得现写。代码如下: 1.css代码 .mask-layer { width: 100%; ...

jQuery九宫格遮罩显示文字效果

  • 2017年07月01日 15:59
  • 445KB
  • 下载

jQuery九宫格遮罩显示文字效果

  • 2015年07月11日 12:32
  • 444KB
  • 下载

使用Jquery实现页面加载时的遮罩效果

整体描述: 当客户点击“查询”按钮时,页面回馈一个“等待中……”的提示,同时对整个页面进行遮罩处理,提升客户体验 所使用框架 使用Jquery的BlockUI Plugin实现,官网地址:htt...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery的插件 --- 对话框的效果 (有遮罩效果)
举报原因:
原因补充:

(最多只允许输入30个字)