`

遮罩层与模式窗口

阅读更多
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
 
					 $('#dialog').dialog({   
                     autoOpen: false,   
                     width: 600,   
                     buttons: {   
                         "Ok": function() {    
                            $(this).dialog("close");  					 
                         },    
                         "Cancel": function() {    
                            $(this).dialog("close");    
                         }      
                     } 
					 ,beforeClose:function(){ $("#full").hide();}
                 });   
			});

			function openDialog(){
				var full  = $("#full");
				 full.css("width",getClientW_H(1)+"px")
				.css("height",getClientW_H(2)+"px").show();
				$("#dialog").dialog("open");
			}
			window.onresize=function(){
			  $("#full").css("width",getClientW_H(1)+"px")
				.css("height",getClientW_H(2)+"px");
			}
			function getClientW_H(type){
				if(1==type){ //width
					return Math.max(Math.max(document.body.scrollWidth,document.body.clientWidth),
						Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth));
				}else{      //height
					return Math.max(Math.max(document.body.scrollHeight,document.body.clientHeight),
						Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight))
				}
			}
		</script>
		<style type="text/css">
		*{font-size:13px}
			#full{position: absolute;background:#9DA7C3;left: 0;top: 0;display: none; z-index:2;filter:alpha(opacity=50);opacity :0.5}
		</style>
		 
	</head>
	<body>
		 <div>
			<input type="button" id="btn" value="打开模式窗口" onclick="openDialog()"/><br>

			<div id="full"></div>

			<div id="dialog" title="系统提示">
				这是dialog
			</div>
		
	 
	
	</body>
</html>
 
 


分享到:
评论

相关推荐

    遮罩窗口2.2 - 给窗口增加半透明模糊遮罩

    源码名称:遮罩窗口-给窗口增加半透明模糊遮罩。源码作者:邓学彬(泪闯天涯)。升级记录:。2.0:增加模糊背景;。2.1:修正遮罩抢焦点、修正一处GDI泄漏;。2.2:修复模糊背景的模式下,高度错误的问题;。@邓学彬。

    Silverlight弹出窗口Demo

    2.解决多个弹出窗口中有一个窗口为模式对话框的情况下,关闭此模式对话框将不会取消模式遮罩层的问题 3.解决多个弹出窗口的情况下,点击后台窗口将其置于最上层的问题 下一步 1.多国语言化,主要是按钮的文字 2.提供...

    在浏览器窗口上添加遮罩层的方法

    如何在浏览器窗口上添加一个遮罩层 背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性。 但是,浏览器原生的弹窗函数(alert, confirm, prompt)...

    基于JavaScript如何制作遮罩层对话框

    2.在遮罩层上方在弹出一个层,由于遮罩层挡住了其他所有元素,用户只能点击弹出层,制造出模式窗口的假象。 废话不多说了,直接给大家贴js代码了。 &lt;head&gt; &lt;meta ...

    易语言-遮罩窗口2.2 - 给窗口增加半透明模糊遮罩

    源码名称:遮罩窗口-给窗口增加半透明模糊遮罩 源码作者:邓学彬(泪闯天涯) 升级记录: 2.0:增加模糊背景; 2.1:修正遮罩抢焦点、修正一处GDI泄漏; 2.2:修复模糊背景的模式下,高度错误的问题;

    Silverlight弹出窗口

    Silverlight弹出窗口Demo ...2.解决多个弹出窗口中有一个窗口为模式对话框的情况下,关闭此模式对话框将不会取消模式遮罩层的问题 3.解决多个弹出窗口的情况下,点击后台窗口将其置于最上层的问题

    弹出最简单的模式化遮罩层的js代码

    假设我们有一个容器container如下: 代码如下: &lt;style type=”text/css”&gt; #container{width:auto;height:auto; overflow:hidden;} /*这里的overflow:hidden;... 那么,我们首先需要定义出这个遮罩的div层如下: 代

    silverlight 多种自定义弹出对话框

    2.解决多个弹出窗口中有一个窗口为模式对话框的情况下,关闭此模式对话框将不会取消模式遮罩层的问题 3.解决多个弹出窗口的情况下,点击后台窗口将其置于最上层的问题 下一步 1.多国语言化,主要是按钮的文字 2....

    bDialog:扩展了Bootstrap Modal功能,使对话框具有更多功能且更易于使用,对话框类型包括modal,alert,mask和toast类型

    多层嵌套的,高度可定制的功能强大的对话框插件, 对话框类型,包括模式对话框,警报对话框,遮罩层,吐司对话框 指南,演示和文件 资源管理器开启 Vuejs版本: dialogs 如果您认为此项目有帮助,请给它加注星标。 ...

    C#开发WPF/Silverlight动画及游戏系列教程(Part1)

    (十一)地图遮罩层的实现 (十二)神奇的副本地图 (十三)牵引式地图移动模式① (十四)精灵控件横空出世!① (十五)精灵控件横空出世!② (十六)牵引式地图移动模式② (十七)完美精灵之八面玲珑(WPF Only)① ...

    GreyBox技术总结(转)

    GreyBox是一个遮罩层的组件也称模式窗口或模态窗口(所谓模态窗口,就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的窗口),它运行以后可以产生不错的界面。

    超漂亮的jQuery AsyncBox弹窗插件

    摘要:脚本资源,jQuery,AsyncBox,弹出窗口,jQuery插件 一款基于jQuery的超漂亮 ... 它内置有拖动器、可设置标题栏图标,可静止定位、动画效果、针对IE6下是否使用 iframe 遮住 select、遮罩层、加载器、按钮式文本等。

    Flash CS5实例教程(第2版) 光盘

    8.2 遮罩层与遮罩的动画制作 199 8.2.1 课堂案例——制作遮罩招贴动画 199 8.2.2 遮罩层 203 8.2.3 静态遮罩动画 204 8.2.4 动态遮罩动画 204 8.3 分散到图层 206 8.3.1 课堂案例——制作风吹文字效果...

    ymprompt消息提示组件4.0【js插件弹出框美化版】

    getPage():在iframe窗口模式下,获取到iframe的dom对象。 如:alert(ymPrompt.getPage().contentWindow.document.body.outerHTML); //获取iframe页面的html内容 resizeWin(w,h):通过程序动态修改窗口的大小。参数...

    wpf源码大全 精通C#3.0图书源码 详细源码 学习好用

    DialogModalDemo WPF中的模式窗口示例。 DrawShapeWindow 绘制图形窗口示例。 FirstNavigateApp 第一个导航窗口应用程序示例。 FrameInPage 在导航窗口中使用Frame示例。 FrameNavigationDemo 框架...

    Block.UI示例

    jQuery的BlockUI插件可以让你在使用AJAX时模拟同步行为,锁定浏览器(模式窗口),代码展示BlockUI的调用示例。

    ActionScript开发技术大全

    29.1.1创建与关闭本地窗口 598 29.1.2添加窗体内容 600 29.1.3位置与尺寸 600 29.1.4窗口层叠控制 602 29.1.5本地窗口控制示例 602 29.2访问文件系统 612 29.2.1目录与文件引用 612 29.2.2目录与文件浏览 614 29.2.3...

    C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial 前38节)

    C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(十一)地图遮罩层的实现 C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(十二)神奇的副本地图 C#开发WPF/Silverlight动画及游戏系列教程...

    网页与Web程序设计 课件 ppt 机械工业出版社 part1

    9.1 层的创建与基本操作 169 9.2 层的属性设置 171 9.2.1 选择层 171 9.2.2 层属性面板的使用 172 9.3 层的其他操作 173 9.3.1 吸附层到网格 173 9.3.2 层和表格的转换 174 9.3.3 嵌套层 175 9.3.4 在层中...

Global site tag (gtag.js) - Google Analytics