使用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>

Android Dialog无法去除遮罩

Android Dialog无法去除遮罩的问题
  • daividtu
  • daividtu
  • 2016年10月20日 17:58
  • 2452

android开发步步为营之51:弹出窗及遮罩层的几种实现方式

需要做一个弹出窗或者遮罩层,我们一般有以下几种思路。 1、AlertDialog对话框 2、PopupWindow弹出窗 3、WindowManager动态添加View到当前页面 4、打开另外...
  • figo0423
  • figo0423
  • 2015年01月12日 17:54
  • 4826

jQuery遮罩层插件

在网页上经常遇到需要等待很久的操作,比如导出报表等。为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执...
  • accountwcx
  • accountwcx
  • 2015年07月07日 17:42
  • 2476

发布个JQuery的遮罩层实现(mask)

用过ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我们的使用。其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验。...
  • baidu_18607183
  • baidu_18607183
  • 2016年09月06日 16:32
  • 1028

jQuery BlockUI 插件(遮罩层)

部分效果 概述 当使用AJAX时,jQuery BlockUI插件可以模拟同步行为,并且不会锁定浏览器。一旦被激活,它便会防止页面上(或页面的一部分)用户的操作,直到被停用。BlockUI给DOM...
  • evangel_z
  • evangel_z
  • 2016年04月11日 19:10
  • 1945

jQuery设置div居中及实现遮罩层

jquer设置div居中级实现遮罩层 这里主要讲遮罩层 web前端开发,写网站静态页面时经常遇到些遮罩层和设置div(物体)居中。 这里又我自己写的一个实例,提供参考。 一、效果图 效果图1: ...
  • csdn_chenli
  • csdn_chenli
  • 2016年11月17日 17:59
  • 3103

【jQuery】遮罩效果的实现

暑假的实习,本来不怎么懂JavaScript的我,写了挺多JavaScript或者是jQuery的一些小效果,现在记录下来,方便以后查看。 遮罩效果一般用在数据处理需要一定时间,这段等待的时间不希望...
  • LZGS_4
  • LZGS_4
  • 2015年11月03日 17:04
  • 1680

jquery实现遮罩层

遮罩层是改变底层div的透明度来实现的。 在我的代码注意以下几个小知识点: 1、z-index:该样式改变元素的层次关系,层次越大,越往上; 2、touMingDu:该class改变了底层的透明...
  • u012385190
  • u012385190
  • 2017年01月11日 17:08
  • 441

jquery 半透明遮罩效果

首先谈谈最简单的实现方式吧。准备两个div,一个是幕布,另一个是要显示在屏幕正中央的部件,content 里面要显示什么东东,就由你自己去定义了。可以是图片,也可以是图表、视频什么的。然后就是添加效果...
  • zheng963
  • zheng963
  • 2015年04月16日 18:07
  • 1398

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

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

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