js弹出层.docVIP

 HYPERLINK /cloudgamer/archive/2008/09/15/1290954.html JavaScript 仿LightBox内容显示效果 相关推荐： HYPERLINK /cloudgamer/archive/2010/10/11/AlertBox.html AlertBox 弹出层（信息提示框）效果 ? 近来要做一个LightBox的效果（也有的叫Windows关机效果），不过不用那么复杂，能显示一个内容框就行了。这个效果很久以前就做过，无非就是一个覆盖全屏的层，加一个内容显示的层。不过showbo教了我position:fixed这个新特性，决定重写一遍。先看效果： LightBox 内容显示   HTMLCONTROL Forms.HTML:Select.1 ps：“定位效果”的意思是屏幕滚动也能固定位置。程序说明：要实现一个简单的LightBox效果，主要有两个部分：覆盖层和高亮层。 【跨浏览器的固定定位】 首先要先说说这个东西position:fixed，它???作用是跨浏览器的固定定位。 摘自 HYPERLINK /andy/post/70.html 详解定位与定位应用：“如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。” 程序中很多地方利用了这个css，ie7、ff都支持这个css，但ie6不支持，程序中只能是在ie6模拟这个效果。 【覆盖层】 覆盖层的作用是把焦点限制在高亮层上，原理是通过一个绝对定位的层（通常使用div），设置它的宽度和高度以致能覆盖整个屏幕（包括缩放和滚动浏览器的情况下），再给它设置一个比较高的zIndex来层叠在原有内容之上（但要比高亮层小），这样用户就只能点到这个层之上的内容了。如果初始化时没有提供覆盖层对象，程序中会自动创建： this.Lay?=?$(this.options.Lay)?||?document.body.insertBefore(document.createElement(div),?document.body.childNodes[0]); 其中由于 HYPERLINK /cloudgamer/archive/2008/07/27/1252308.html document.body.appendChild()导致IE已终止操作bug，所以用了insertBefore。。 【覆盖屏幕】 覆盖层的关键就是如何做到覆盖整个屏幕（锁定整个页面），支持position:fixed的话很简单： with(this.Lay.style){?display?=?none;?zIndex?=?this.zIndex;?left?=?top?=?0;?position?=?fixed;?width?=?height?=?100%;?} 这样能把浏览器的视框覆盖了，其中使用了fixed样式，这里的意思是定位在浏览器的视框，并100%覆盖。注意不要理解错为这个层覆盖了整个页面，它只是把浏览器可视的部分覆盖了来达到效果。ie6不支持怎么办？有几个方法：1，做一个覆盖视框的层，并在onscroll时相应移动，在onresize时重新设大小；2，做一个覆盖视框的层，在样式上模拟fixed效果；3，做一个层覆盖了整个页面的层，并在onresize时重新设大小；方法1的缺点是滚动时很容易露出马脚，而且不好看；方法2的缺点是需要页面结构的改动和body样式的修改，绝对不是好的架构；而我用的是方法3，有更好的方法欢迎提出。 用这个方法只要把position设为absolute，并使用一个_resize方法来设置width和height即可： Codethis.Lay.style.position?=?absolute;this._resize?=?Bind(this,?function(){????this.Lay.style.width?=?Math.max(document.documentElement.scrollWidth,?document.documentElement.clientWidth)?+?px;????this.Lay.style.height?=?Math.max(document.documentElement.scrollHeight,?document.documentE