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

原创 2012年03月28日 19:30:41
<!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>

相关文章推荐

Jquery超简单遮罩层实现代码

在开发中,为了避免二次提交,遮罩层的运用越来越普遍 找了很多
  • tolcf
  • tolcf
  • 2014年08月20日 21:36
  • 85352

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

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

jquery插件——模拟dialog效果案例

jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery 的全局函数就是属于jQuery...

JqueryUI插件dialog实现遮罩的效果

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

Dialog弹出层Jquery插件多种效果版

  • 2014年11月14日 17:08
  • 69KB
  • 下载

jQuery插件实现模拟dialogs效果实例(图片)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 模拟dia...

jQuery插件--dialog效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档...

JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)

在很多项目中都会涉及到数据加载。数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个【数据加载中。。。】的提示。今天就做了一个这样的提示框。 先去jQuery官网看看怎么写jQuery...

模拟电子签章盖章效果的jQuery插件源码

转自http://www.jquerycn.cn/a_5675 客户提了个需求,需要在已审核的文档上加盖公章,网上找了找没有现成的,自己动手丰衣足食 老规矩,上图看效果: ...

使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果

日期:2011/11/01 来源:GBin1.com 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷...
  • jjfat
  • jjfat
  • 2011年11月01日 19:08
  • 889
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jQuery插件实现 模拟dialog的遮罩效果
举报原因:
原因补充:

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