整版重叠窗口

Abraham Chaffin


	[Full Page Overlay Window] 教程 : 网页设计教程整版重叠窗口

字母a Creativecow网站设计教程

整页弹出窗口叠加

本指南中您将学习如何建立一个完整的网页弹出窗口，覆盖现有的 html 网页. 这项技术是经常使用的显示视频, 电影文件, 图片, 或形式当用户点击一个组成部分网页.

亚伯拉罕查芬
Creativecow.net,
坎布里亚, 美国加利福尼亚州

© 2008 Creativecow.net. 保留所有权利.

鉴于例如

导言

这项技术不是一个弹出窗口像人们普遍认为. 它不是一个单独的窗口 html 打开浏览器，而是一个股利的覆盖现有的 html 网页. 该部是半透明，并创建一个好的效果，使用户知道他们可以回到其他网页关闭窗口（部）是最.

后面的方法完成，这是非常简单的:

初始状态的股利，将覆盖的网页 是隐藏的，没有内容，它的内部 html. 这意味着最初没有任何关系DIV标记的开幕和闭幕DIV标记和内容有没有显示.

开始显示股利 您必须先选择和组成部分，一个用户点击, 笼罩, 等. 转让行为. 你甚至可以拥有它开始加载网页时如果你想. 通常你会图片, 按钮, 或文字，用户点击启动JavaScript函数.

当股利显示 由JavaScript函数基本上消除价值没有显示的显示价值的空白或''它返回的内容默认值是要显示. 其次是股利的内心 html 充满预定 html 代码，将代码已经不管你想显示在覆盖窗口. 在这个例子中我们将有一个视频里的桌子，帮助中心的视频屏幕中央. 也有关闭按钮关闭该窗口或半透明弹出股利.

点击关闭按钮的弹出式窗口 启动逆转时，显示. 它分配股利的显示值回零票和内套 html 回什么.

代码

在这里开始的代码是从开始到结束，然后我们会去它一点一点地:

“!文档 html 公众“ - / /的W3C / / DTD的的XHTML 1.0过渡/ /恩“ ”  http://www.W3号.org  / tr/xhtml1/dtd/xhtml1-transitional.DTD的“ ”
的 head
风格
＃ displaybox （
	深度指数: 10000 ;
	过滤器: 阿尔法（不透明= 50 ） ; / *老年人即* /
	过滤器:的ProgID:Dximagetransform.microsoft.阿尔法（不透明= 50 ） ; / *即* /
	，万盎司，不透明: .50 ; / *老年人Mozilla浏览器* /
	，被问到KHTML ，不透明: 0.5 ; / *旧的Safari浏览器浏览器浏览器浏览器 * /
	不透明: 0.5 ; / *支持目前的Mozilla浏览器, Safari浏览器浏览器浏览器浏览器, 和歌剧 * /
	背景色:＃ 000000 ;
	立场:固定;顶端:0px ;左:0px ;宽度:100 ％ ;高度:100 ％ ;颜色:＃ ffffff ;文字对齐:中心;垂直对齐:中东;
}
“ /样式”
script
功能唱首歌（ ） （
	无功Thediv =文件.Getelementbyid （ ' displaybox ' ） ;
	如果（ Thediv.风格.显示== “无” ） （
		Thediv.风格.显示= “ ” ;
		Thediv.Innerhtml = “  table width='100%' height='100%'   tr   td align='center' valign='middle' width='100%' height='100%'  ”对象的ClassID = '的CLSID:02bf25d5 - 8c17 - 4b23 - bc80 - d3488abddc6b '代码= '  http://www.apple.com  / qtactivex / qtplugin.驾驶室'宽度= '640 '高度= '500 “   ”参数名称= ' src中的价值= '  http:/ / cowcast.Creativecow.net  / after_effects/episodes/shape_tips_1_pod.的MP4 “    param name='bgcolor' value='#000000'  ”嵌入src中= '  http:/ / cowcast.Creativecow.net  / after_effects/episodes/shape_tips_1_pod.的MP4 '自动= '真正的' pluginspage = '  http://www.apple.com  /的QuickTime /下载/身高= '500 '宽度= '640 ' bgcolor = ' ＃ 000000 “   ” /嵌入“ ” /对象“  br   br  ”一href = ' ＃ ' onclick = '返回唱首歌（ ） ; “  关闭窗口” / 1 “ ” /运输署“ ” /文“ ” /表“ ” ;
	其他（ ）
		Thediv.风格.显示= “没有” ;
		Thediv.Innerhtml = '' ;
	}
	返回FALSE ;
}
“ /脚本”
“ /头”
body
“股利编号= ” displaybox “风格= ”显示: 没有;"  /股利“
的 a href='#' onclick='return clicker();' 敞开的窗户“ / 1 ”
“ /体”

严格模式

这行代码是需要在最顶部的文件，使严格的模式在IE7. 固定定位不支持在IE7没有这个执行，本教程将无法正常工作. 注意，这可能也并非在所有的浏览器是固定的定位是一个较新的CSS属性.

的CSS风格

我们去了的CSS风格的股利，看看它的半透明股利的覆盖其余的网页:

的Z -指数的CSS属性是用来提高在Z空间层以上的所有其他元素，例如下拉式选单, 等. 设置为10000不错保证你会得到最上面的其他因素有一个明确的Z指数.

最困难的部分是让半透明股利影响多个浏览器. 火狐, Internet Explorer的, Safari浏览器浏览器浏览器浏览器, 歌剧, 甚至谷歌铬=邻并不是所有的这些浏览器使用相同的半透明的CSS属性集. 即使用它的过滤器设置. Mozilla 火狐浏览器已经“针灸，不透明”. 和其他人使用“透明度” ，使我最感，希望将成为标准的未来.

第一行“＃ displaybox （“指派以下风格元素与displaybox编号.

在未来五年线不同的方式，使透明度设置为50 ％
" 过滤器: 阿尔法（不透明= 50 ） ; / *老年人即* / 过滤器:的ProgID:Dximagetransform.microsoft.阿尔法（不透明= 50 ） ; / *即* / ，万盎司，不透明: .50 ; / *老年人Mozilla浏览器* / ，被问到KHTML ，不透明: 0.5 ; / *旧的Safari浏览器浏览器浏览器浏览器 * / 不透明: 0.5 ; / *支持目前的Mozilla浏览器, Safari浏览器浏览器浏览器浏览器, 和歌剧 * / "
只需变更5, .5或50的价值观你喜欢什么. 的例子是设置为50 ％不透明.

"背景色:＃ 000000 ;“当然，让黑色的背景色，然后在50 ％透明度将使灰色.

"立场:固定;“规定了固定的定位是相对或绝对没有的流动网页. 这使得它的内容可以跳出和浮动以上的其他内容和固定的窗口，而不是网页或其他内容. 相对定位使要素流动的网页和移动和移动的其他内容周边. 绝对花车以上，但相对网页没有窗口, 如果您使用此元素只会留在网页上方的.

"顶端:0px ;左:0px ;宽度:100 ％ ;高度:100 ％ ;“地方半透明股利左上角和传播出来至于它可以在窗口.

"文本对齐:中心;垂直对齐:中东;“我开始尝试的要素中心内的股利，以在网页中间的.

JavaScript的

现在让我们来看看的JavaScript ，使要素的变化时，用户交互的网页并执行的JavaScript函数:

第一行的功能宣布函数名称“功能唱首歌（）（“使用整个页面.

"无功Thediv =文件.Getelementbyid （ ' displaybox ' ） ; “ 设定值为“ Thediv ”可变的股利与编号的“ displaybox ”. “ Thediv ”变量将用于通过其他的功能，以便在浏览器没有重新获得displaybox元素.

"如果（ Thediv.风格.显示== “无” ）（“基本上说，, “如果现在Thediv没有显示做什么我要告诉你."

使Thediv可见“Thediv.风格.显示= “ ” ;".

这一下降 html 在Thediv “Thediv.Innerhtml = “的 a href='#' onclick='return clicker();' 关闭窗口“ / 1 ”"". Inbetween两个引号在这里你将什么 html 您要显示. 记住，有另一个回复[ “ ]将于本月底结束标记，因此您应使用单引号在您的 html [ ' ]或逃避[ “ ]用反斜杠[ ]前面的所有报价é.g. [ “ ]. 您应该某处有能力再次关闭窗口. 其他明智的用户将遇到的窗口，在页面顶部和无法取回.

"其他（）“如果有人看见然后股利...

"Thediv.风格.显示= “没有” ;“隐藏

"Thediv.Innerhtml = '' ;“ ，并设定其内容无关.

"}“年底如果else语句.

"返回FALSE ;“返回FALSE的功能. 这基本上使得这样的链接实际上并不去的目的地href当你点击它. 如果您使用的是onclick方法的链接.

"}“结束的函数.

使工作

使实际工作中的网页中，您需要有股利某处的网页隐藏在开始和东西的用户点击:

隐藏displaybox股利:

的链接，将执行并返回唱首歌JavaScript函数onclick:

鉴于例如

这应该给你一些想法，如何建立这种影响，也给你足够的认识调整, 更改, 和操纵它进入您自己的 html 布局. 享受!