单击iframe页面的一个按钮，如何让父页面实现跳转？ - Java Web开发当前位置:& &&&单击iframe页面的一个按钮，如何让父页面实现跳转？单击iframe页面的一个按钮，如何让父页面实现跳转？&&网友分享于：&&浏览：215次单击iframe页面的一个按钮，怎么让父页面实现跳转？？本帖最后由 hardwin 于
16:43:14 编辑
_new_scorm.jsp页面，嵌了个iframe1。iframe1加载上来的是别人写的jsp页面。页面有个按钮：
&input&class="btn&btn_gray"&type="button"&value="取消"/&
我想在点击该按钮时，整个页面实现跳转。也就是父页面跳转。比如说让它跳转到"a.action"
PS：iframe加载的页面我没法更改。它请求的是另外一个系统里的资源。
&div&id="content"&
&iframe&frameborder="0"&scrolling="yes"&class="iframebox"&width="100%"&height="1000"&id="iframe1"&name="iframe1"&&
src="${rdbTeacherScormUploadUrl}"&/&
------解决方案--------------------给你的button加上click事件
然后在fn里面写上
var&_parent&=&indow.&//获得父页面的对象
接下来就可以调父页面的方法了
_parent.方法名
就跟调json里面的函数一样------解决方案--------------------在_new_scorm.jsp页面，让整个页面跳转，怎么弄？比如跳转到list.action
这个简单&window.loaction.href='list.action'------解决方案--------------------我试了下，即使给按钮id值，通过楼上那种方式，
"iframeId".contents().find("buttonId").bind("click",function(){
&&&&alert("hello,click!");
也没有反应。。
发现CSDN&JAVA频道没落起来了。没人看技术论坛的贴。其它比如数据库频道好不少。------解决方案--------------------&&window.parent.loaction.href&这个肯定可以用来刷新父窗体了&只是看你这个button有几个父窗体了
&&this.opener也可以的
得button对象的话&用调试吧&调试窗体可以看到button在那个位置
&document.all&看那个button在那个地方&再去得到这个对象&&------解决方案--------------------
你可以跳到别的地方去，指定target=''。&如果要改变也是父页面的刷新。或者让那个div容器重新加载一个页面。$("div#content").load("1.html");1.html&代表你要跳的页面
&（高级javaweb群：）------解决方案--------------------window.parent.loaction.href&------解决方案--------------------你的父页面的话，在iframe里面的页面的js可以执行
top.location.href="list.action";//只是个例子，href的值不见得是你需要的
这样可以直接修改父页面的地址跳转------解决方案--------------------楼主这样子吗？
$(".btn.btn_gray",document.frames("iframeId").document).click(){
&&&&location.href="xxxx";
实现上就是为你的iframe按钮注册点击事件，只不过是在父页面实现罢了~~------解决方案--------------------window.parent.location.href="";赶紧去试试吧------解决方案--------------------var&url&=&"logon.jsp";
window.parent.location.href&=&
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有2591人阅读
java/js（15）
实际上这是一个有关onclick（）属标触发事件的引用
具体如何来操作呢
&div id=&txt&&
&input type=&txt&/&&/div&
&input type=&button& id=&btn& value=&按纽“ values=&1&/&
&script& type=&text/javascript&&
function click(){
var attr = document.getElenmentByid(&btn&).attributes[&values&];
var value = attr.
if(value ==&1&){
&&&&&&&&&&&&&&& document.getElementByid(&txt&).style.display=&none&;
&&&&&&&&&&&&&&& attr.value == &2&;
&&&&&&&&&&&&&&& else if(value == &2&){
&&&&&&&&&&&&&&&& document.getElementByid(&txt&).style.diplay =& “block”;
&&&&&&&&&&&&&&&&& attr.value = &1&;
&&&&&&&&&&&&&&&&&&&&&&&&&&&& window.onload = function(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&& var btn=document.getElementByid(&btn&);
&&&&&&&&&&&&&&&&&&&&&&&&&&&& btn.onclick=function(){Click();
那么如何通过java实现onclick()事件来触发div区块功能呢
如合结合java实现对span或者div使用onmouseout时，当鼠标还处在区域内是事件就响应了
用&层&结合javascript实现!!
1:先定义一个层,你可以随意设置其边框,背景等:
&div id=&Hello& style=&position:background:#CCFFFF;border:solid 1px #999999;display:none&&&/div&
2:再编写javascript:
&script language=&javascript&&
function showtip(tipStr){
document.all.tip.innerHTML=tipS
document.all.tip.style.left=window.event.x;
document.all.tip.style.top=window.event.y;
document.all.tip.style.display=&&;
function hidetip(){
document.all.tip.style.display=&none&;
在文字标记里定义:
&span onmouseover=&showtip('备注内容');& onmouseout=&hidetip();&&文字&/span&&/h5&
this.Lay&=&$(this.options.Lay)&||&document.body.insertBefore(document.createElement(&div&),&document.body.childNodes[0]);&&
&span style=&background-color: rgb(255, 255, 255);&&this.Lay = $(this.options.Lay) || document.body.insertBefore(document.createElement(&div&), document.body.childNodes[0]);&/span&
其中由于document.body.appendChild()导致IE已终止操作bug，所以用了insertBefore。。&
【覆盖屏幕】&
覆盖层的关键就是如何做到覆盖整个屏幕（锁定整个页面），支持position:fixed的话很简单：&
with(this.Lay.style){&display&=&&none&;&zIndex&=&this.zI&left&=&top&=&0;&position&=&&fixed&;&width&=&height&=&&100%&;&}&&
&span style=&background-color: rgb(255, 255, 255);&&with(this.Lay.style){ display = &none&; zIndex = this.zI left = top = 0; position = &fixed&; width = height = &100%&; }&/span&
这样能把浏览器的视框覆盖了，其中使用了fixed样式，这里的意思是定位在浏览器的视框，并100%覆盖。&
注意不要理解错为这个层覆盖了整个页面，它只是把浏览器可视的部分覆盖了来达到效果。
ie6不支持怎么办？有几个方法：&
1，做一个覆盖视框的层，并在onscroll时相应移动，在onresize时重新设大小；&
2，做一个覆盖视框的层，在样式上模拟fixed效果；&
3，做一个层覆盖了整个页面的层，并在onresize时重新设大小；&
方法1的缺点是滚动时很容易露出马脚，而且不好看；方法2的缺点是需要页面结构的改动和body样式的修改，绝对不是好的架构；而我用的是方法3，有更好的方法欢迎提出。&
用这个方法只要把position设为absolute，并使用一个_resize方法来设置width和height即可：&
this.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.documentElement.clientHeight)&+&&px&; &&});&&
&span style=&background-color: rgb(255, 255, 255);&&this.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.documentElement.clientHeight) + &px&;
});&/span&
要注意的是scrollHeight和clientHeight的区别（用Height容易测试），顺带还有offsetHeight，手册上的说明：&
scrollHeight：Retrieves the scrolling height of the object.&
clientHeight：Retrieves the height of the object including padding, but not including margin, border, or scroll bar.&
offsetHeight：Retrieves the height of the object relative to the layout or coordinate parent, as specified by the offsetParent
property.&
我的理解是：&
scrollHeight是对象的内容的高度；&
clientHeight是对象的可视部分高度；&
offsetHeight是clientHeight加上border和滚动条本身高度。&
举个例子吧，先说说clientHeight和offsetHeight的区别(在ie7中测试)：&
测的是外面的div，offsetHeight和clientHeight相差17（分别是83和100），这个相差的就是那个滚动条本身的高度。&
再看看clientHeight和scrollHeight的区别(下面是模拟在ie中的情况)：&
可以看到clientHeight不受内容影响，都是83，即内容有没有超过对象高度都不受影响，但scrollHeight会受内容高度影响，而且从测试可以意识到：&
当有滚动条时，覆盖层的高度应该取scrollHeight（内容高度）；当没有滚动条时，覆盖层的高度应该取clientHeight（视框高度）。&
而恰好两个情况都是取两者中比较大的值，所以就有了以下程序：&
Math.max(document.documentElement.scrollHeight,&document.documentElement.clientHeight)&+&&px&;&&
&span style=&background-color: rgb(255, 255, 255);&&Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + &px&;&/span&
设宽度时是不包括滚动条部分的而documentElement一般也没有border，所以不需要offsetWidth。&
上面可以看到我用的是documentElement而不是body，手册上是这样说的：&
Retrieves a reference to the root node of the document.&
意思是整个文档的根节点，其实就是html节点（body的上一级），注意这是在XHTML的标准下。上面可以看到我们取值的对象是整个文档而不只是body，所以这里用documentElement。&
要注意的是在window的onresize事件中scrollWidth和clientWidth的值会产生变化，程序中在onresize中使用_resize方法重新设置宽度高度：&
if(isIE6){&this._resize();&window.attachEvent(&onresize&,&this._resize);&}&&
&span style=&background-color: rgb(255, 255, 255);&&if(isIE6){ this._resize(); window.attachEvent(&onresize&, this._resize); }&/span&
【覆盖select】&
自定义的层给select遮挡住是一个老问题了，不过可喜的是ie7和ff都已经支持select的zIndex，只要给层设定高的zIndex就能覆盖select了，可惜对于ie6这个问题还是需要解决。&
覆盖select据我所知有两个比较好的方法：&
1，显示层时，先隐藏select，关闭层时再重新显示；&
2，用一个iframe作为层的底，来遮住select。&
方法1应该都明白，方法2就是利用iframe可以覆盖select的特性，只要把一个iframe作为层的底部就可以覆盖下面的select了，程序中是这样使用的：&
this.Lay.innerHTML&=&'&iframe&style=&position:top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);&&&/iframe&'&&
&span style=&background-color: rgb(255, 255, 255);&&this.Lay.innerHTML = '&iframe style=&position:top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);&&&/iframe&'&/span&
可以看出这个透明的iframe也以同样覆盖整个页面，如果是有内容显示的页面最好设置z-index:-1;确保iframe在层的底部。&
个人觉得使用方法2比较好，但始终是改变了页面结构，有时会比较难控制，至于方法1就比较容易方便。&
【高亮层】&
高亮层就是用来显示内容的层，没什么看头，所以特意加了些效果在上面，吸引一下眼球。
有兴趣的话可以结合拖放效果和渐变效果，做出更好的效果。&
【固定定位】&
这里“固定定位”的意思是当滚动滚动条时，高亮层依然保持在浏览器对应的位置上，把Fixed设为true就会开启这个效果。&
同样对于支持fixed的浏览器很简单，只要把position设为fixed就行了，这个样式本来就是这样使用的，但可怜的ie6只能模拟了。&
ie6模拟的原理是在onscroll事件中，不断根据滚动的距离修正top和left。&
首先设置position为absolute，要注意的是position要在覆盖层显示之前显示，否则计算覆盖层宽高时会计算偏差（例如把页面撑大）。&
再给onscroll事件添加定位函数_fixed来修正滚屏参数：&
this.Fixed&&&&window.attachEvent(&onscroll&,&this._fixed);&&
&span style=&background-color: rgb(255, 255, 255);&&this.Fixed && window.attachEvent(&onscroll&, this._fixed);&/span&定位函数_fixed是这样的：&
this._fixed&=&Bind(this,&function(){&this.Center&?&this.SetCenter()&:&this.SetFixed();&});&&
&span style=&background-color: rgb(255, 255, 255);&&this._fixed = Bind(this, function(){ this.Center ? this.SetCenter() : this.SetFixed(); });&/span&
可以看出在_fixed中，当设置了居中显示时会执行SetCenter程序（后面会说明），否则就执行SetFixed程序。&
先说说SetFixed程序的原理，就是把当前scrollTop减去_top值（上一个scrollTop值）再加上当前的offsetTop，就得到要设置的top值了：&
this.Box.style.top&=&document.documentElement.scrollTop&-&this._top&+&this.Box.offsetTop&+&&px&; &&this.Box.style.left&=&document.documentElement.scrollLeft&-&this._left&+&this.Box.offsetLeft&+&&px&; &&& &&this._top&=&document.documentElement.scrollT&this._left&=&document.documentElement.scrollL&&
&span style=&background-color: rgb(255, 255, 255);&&this.Box.style.top = document.documentElement.scrollTop - this._top + this.Box.offsetTop + &px&;
this.Box.style.left = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft + &px&;
this._top = document.documentElement.scrollT this._left = document.documentElement.scrollL&/span&
【居中显示】&
“居中显示”的意思是高亮层位于视框左右上下居中的位置。&
实现这个有两个方法：&
1，视框宽度减去高亮层宽度的一半就是居中需要的left值；&
2，先设置left值为50%，然后marginLeft设为负的高亮层宽度的一半。&
方法1相对方法2需要多一个视框宽度，而且方法2在缩放浏览器时也能保持居中，明显方法2是更好，不过用margin会影响到left和top的计算，必须注意（例如SetFix修正的地方）。这里我选择了方法2，还要注意offsetWidth和offsetHeight需要在高亮层显示之后才能获取，所以定位程序需要放到高亮层显示之后：&
this.Box.style.top&=&this.Box.style.left&=&&50%&; &&if(this.Fixed){ &&&&&&this.Box.style.marginTop&=&-&this.Box.offsetHeight&/&2&+&&px&; &&&&&&this.Box.style.marginLeft&=&-&this.Box.offsetWidth&/&2&+&&px&; &&}else{ &&&&&&this.SetCenter(); &&}&&
&span style=&background-color: rgb(255, 255, 255);&&this.Box.style.top = this.Box.style.left = &50%&;
if(this.Fixed){
this.Box.style.marginTop = - this.Box.offsetHeight / 2 + &px&;
this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + &px&;
this.SetCenter();
其中如果不是固定定位，需要用SetCenter程序来修正滚屏参数，SetCenter程序是这样的：
this.Box.style.marginTop&=&document.documentElement.scrollTop&-&this.Box.offsetHeight&/&2&+&&px&; &&this.Box.style.marginLeft&=&document.documentElement.scrollLeft&-&this.Box.offsetWidth&/&2&+&&px&;&&
&span style=&background-color: rgb(255, 255, 255);&&this.Box.style.marginTop = document.documentElement.scrollTop - this.Box.offsetHeight / 2 + &px&;
this.Box.style.marginLeft = document.documentElement.scrollLeft - this.Box.offsetWidth / 2 + &px&;&/span&
【比较文档位置】&
在ie6当不显示覆盖层时需要另外隐藏select，这里使用了“覆盖select”的方法1，值得留意的是这里加了个select是否在高亮层的判断：&
this._select.length&=&0; &&Each(document.getElementsByTagName(&select&),&Bind(this,&function(o){ &&&&&&if(!Contains(this.Box,&o)){&o.style.visibility&=&&hidden&;&this._select.push(o);&} &&}))&&
&span style=&background-color: rgb(255, 255, 255);&&this._select.length = 0;
Each(document.getElementsByTagName(&select&), Bind(this, function(o){
if(!Contains(this.Box, o)){ o.style.visibility = &hidden&; this._select.push(o); }
}))&/span&
其中Contains程序是这样的：&
var&Contains&=&function(a,&b){ &&&&&&return&a.contains&?&a&!=&b&&&&a.contains(b)&:&!!(a.compareDocumentPosition(b)&&&16); &&}&&
&span style=&background-color: rgb(255, 255, 255);&&var Contains = function(a, b){
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
作用是返回a里面是否包含b，里面用到了两个函数，分别是ie的contains和ff(dom)的compareDocumentPosition。&
其中contains手册里是这样写的：&
Checks whether the given element is contained within the object.&
意思是检测所给对象是否包含在指定对象里面。注意如果所给对象就是指定对象本身也会返回true，虽然这样不太合理。&
而ff的compareDocumentPosition功能更强大。&
参考Comparing Document Position看下表：&
从pareDocumentPosition(NodeB)返回的结果：&
Bits Number Meaning&
Elements are identical.&
The nodes are in different documents (or one is outside of a document).&
Node B precedes Node A.&
Node A precedes Node B.&
Node B contains Node A.&
Node A contains Node B.&
For private use by the browser.&
从这里可以看出pareDocumentPosition(NodeB) & 16的意思是当第5位数是“1”时才返回16，也就是只有NodeA包含NodeB时返回16（&是位与运算）。&
ps：为什么不直接a.compareDocumentPosition(b) == 16，我也不清楚。&
&!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/&charset=gb2312&&/& &&&title&JavaScript&仿LightBox内容显示效果&/title& &&&/head& &&&&&body& &&&&&&&&&&&&&script& &&&&var&isIE&=&(document.all)&?&true&:& &&&&var&isIE6&=&isIE&&&&([/MSIE&(\d)\.0/i.exec(navigator.userAgent)][0][1]&==&6); &&&&var&$&=&function&(id)&{ &&&&&&return&&string&&==&typeof&id&?&document.getElementById(id)&:& &&}; &&&&var&Class&=&{ &&&&&&create:&function()&{ &&&&&&&&&&return&function()&{&this.initialize.apply(this,&arguments);&} &&&&&&} &&} &&&&var&Extend&=&function(destination,&source)&{ &&&&&&for&(var&property&in&source)&{ &&&&&&&&&&destination[property]&=&source[property]; &&&&&&} &&} &&&&var&Bind&=&function(object,&fun)&{ &&&&&&return&function()&{ &&&&&&&&&&return&fun.apply(object,&arguments); &&&&&&} &&} &&&&var&Each&=&function(list,&fun){ &&&&&&for&(var&i&=&0,&len&=&list.&i&&&&i++)&{&fun(list[i],&i);&} &&}; &&&&var&Contains&=&function(a,&b){ &&&&&&return&a.contains&?&a&!=&b&&&&a.contains(b)&:&!!(a.compareDocumentPosition(b)&&&16); &&} &&&&&&var&OverLay&=&Class.create(); &&OverLay.prototype&=&{ &&&&initialize:&function(options)&{ &&&&&&&&this.SetOptions(options); &&&&&& &&&&&&this.Lay&=&$(this.options.Lay)&||&document.body.insertBefore(document.createElement(&div&),&document.body.childNodes[0]); &&&&&& &&&&&&this.Color&=&this.options.C &&&&&&this.Opacity&=&parseInt(this.options.Opacity); &&&&&&this.zIndex&=&parseInt(this.options.zIndex); &&&&&& &&&&&&with(this.Lay.style){&display&=&&none&;&zIndex&=&this.zI&left&=&top&=&0;&position&=&&fixed&;&width&=&height&=&&100%&;&} &&&&&& &&&&&&if(isIE6){ &&&&&&&&&&this.Lay.style.position&=&&absolute&; &&&&&&&&&&//ie6设置覆盖层大小程序 &&&&&&&&&&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.documentElement.clientHeight)&+&&px&; &&&&&&&&&&}); &&&&&&&&&&//遮盖select &&&&&&&&&&this.Lay.innerHTML&=&'&iframe&style=&position:top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);&&&/iframe&'&&&&&&} &&&&}, &&&&//设置默认属性 &&&&SetOptions:&function(options)&{ &&&&&&this.options&=&{//默认值 &&&&&&&&&&Lay:&&&&&&&&null,//覆盖层对象 &&&&&&&&&&Color:&&&&&&&#fff&,//背景色 &&&&&&&&&&Opacity:&&&&50,//透明度(0-100) &&&&&&&&&&zIndex:&&&&&1000//层叠顺序 &&&&&&}; &&&&&&Extend(this.options,&options&||&{}); &&&&}, &&&&//显示 &&&&Show:&function()&{ &&&&&&//兼容ie6 &&&&&&if(isIE6){&this._resize();&window.attachEvent(&onresize&,&this._resize);&} &&&&&&//设置样式 &&&&&&with(this.Lay.style){ &&&&&&&&&&//设置透明度 &&&&&&&&&&isIE&?&filter&=&&alpha(opacity:&&+&this.Opacity&+&&)&&:&opacity&=&this.Opacity&/&100; &&&&&&&&&&backgroundColor&=&this.C&display&=&&block&; &&&&&&} &&&&}, &&&&//关闭 &&&&Close:&function()&{ &&&&&&this.Lay.style.display&=&&none&; &&&&&&if(isIE6){&window.detachEvent(&onresize&,&this._resize);&} &&&&} &&}; &&&&&&&&var&LightBox&=&Class.create(); &&LightBox.prototype&=&{ &&&&initialize:&function(box,&options)&{ &&&&&& &&&&&&this.Box&=&$(box);//显示层 &&&&&& &&&&&&this.OverLay&=&new&OverLay(options);//覆盖层 &&&&&& &&&&&&this.SetOptions(options); &&&&&& &&&&&&this.Fixed&=&!!this.options.F &&&&&&this.Over&=&!!this.options.O &&&&&&this.Center&=&!!this.options.C &&&&&&this.onShow&=&this.options.onS &&&&&& &&&&&&this.Box.style.zIndex&=&this.OverLay.zIndex&+&1; &&&&&&this.Box.style.display&=&&none&; &&&&&& &&&&&&//兼容ie6用的属性 &&&&&&if(isIE6){ &&&&&&&&&&this._top&=&this._left&=&0;&this._select&=&[]; &&&&&&&&&&this._fixed&=&Bind(this,&function(){&this.Center&?&this.SetCenter()&:&this.SetFixed();&}); &&&&&&} &&&&}, &&&&//设置默认属性 &&&&SetOptions:&function(options)&{ &&&&&&this.options&=&{//默认值 &&&&&&&&&&Over:&&&true,//是否显示覆盖层 &&&&&&&&&&Fixed:&&false,//是否固定定位 &&&&&&&&&&Center:&false,//是否居中 &&&&&&&&&&onShow:&function(){}//显示时执行 &&&&&&}; &&&&&&Extend(this.options,&options&||&{}); &&&&}, &&&&//兼容ie6的固定定位程序 &&&&SetFixed:&function(){ &&&&&&this.Box.style.top&=&document.documentElement.scrollTop&-&this._top&+&this.Box.offsetTop&+&&px&; &&&&&&this.Box.style.left&=&document.documentElement.scrollLeft&-&this._left&+&this.Box.offsetLeft&+&&px&; &&&&&& &&&&&&this._top&=&document.documentElement.scrollT&this._left&=&document.documentElement.scrollL &&&&}, &&&&//兼容ie6的居中定位程序 &&&&SetCenter:&function(){ &&&&&&this.Box.style.marginTop&=&document.documentElement.scrollTop&-&this.Box.offsetHeight&/&2&+&&px&; &&&&&&this.Box.style.marginLeft&=&document.documentElement.scrollLeft&-&this.Box.offsetWidth&/&2&+&&px&; &&&&}, &&&&//显示 &&&&Show:&function(options)&{ &&&&&&//固定定位 &&&&&&this.Box.style.position&=&this.Fixed&&&&!isIE6&?&&fixed&&:&&absolute&; &&&&&&&&//覆盖层 &&&&&&this.Over&&&&this.OverLay.Show(); &&&&&& &&&&&&this.Box.style.display&=&&block&; &&&&&& &&&&&&//居中 &&&&&&if(this.Center){ &&&&&&&&&&this.Box.style.top&=&this.Box.style.left&=&&50%&; &&&&&&&&&&//设置margin &&&&&&&&&&if(this.Fixed){ &&&&&&&&&&&&&&this.Box.style.marginTop&=&-&this.Box.offsetHeight&/&2&+&&px&; &&&&&&&&&&&&&&this.Box.style.marginLeft&=&-&this.Box.offsetWidth&/&2&+&&px&; &&&&&&&&&&}else{ &&&&&&&&&&&&&&this.SetCenter(); &&&&&&&&&&} &&&&&&} &&&&&& &&&&&&//兼容ie6 &&&&&&if(isIE6){ &&&&&&&&&&if(!this.Over){ &&&&&&&&&&&&&&//没有覆盖层ie6需要把不在Box上的select隐藏 &&&&&&&&&&&&&&this._select.length&=&0; &&&&&&&&&&&&&&Each(document.getElementsByTagName(&select&),&Bind(this,&function(o){ &&&&&&&&&&&&&&&&&&if(!Contains(this.Box,&o)){&o.style.visibility&=&&hidden&;&this._select.push(o);&} &&&&&&&&&&&&&&})) &&&&&&&&&&} &&&&&&&&&&//设置显示位置 &&&&&&&&&&this.Center&?&this.SetCenter()&:&this.Fixed&&&&this.SetFixed(); &&&&&&&&&&//设置定位 &&&&&&&&&&this.Fixed&&&&window.attachEvent(&onscroll&,&this._fixed); &&&&&&} &&&&&& &&&&&&this.onShow(); &&&&}, &&&&//关闭 &&&&Close:&function()&{ &&&&&&this.Box.style.display&=&&none&; &&&&&&this.OverLay.Close(); &&&&&&if(isIE6){ &&&&&&&&&&window.detachEvent(&onscroll&,&this._fixed); &&&&&&&&&&Each(this._select,&function(o){&o.style.visibility&=&&visible&;&}); &&&&&&} &&&&} &&}; &&&&&/script& &&&&&&&style& &&.lightbox{width:300background:#FFFFFF;border:1px&solid&#line-height:25&top:20%;&left:20%;} &&.lightbox&dt{background:#f4f4f4;&padding:5} &&&/style& &&&&&dl&id=&idBox&&class=&lightbox&& &&&&&dt&id=&idBoxHead&&&b&LightBox&/b&&&/dt& &&&&&dd& &&&&&&内容显示 &&&&&&&br&/&&br&/& &&&&&&&input&name=&&&type=&button&&value=&&关闭&&&id=&idBoxCancel&&/& &&&&&&&br&/&&br&/& &&&&&/dd& &&&/dl& &&&&&&&div&style=&margin:0&&width:800&height:500&border:1px&solid�&& &&&&&input&type=&button&&value=&关闭覆盖层&&id=&btnOverlay&&/& &&&input&type=&button&&value=&黑色覆盖层&&id=&btnOverColor&&/& &&&input&type=&button&&value=&全透覆盖层&&id=&btnOverOpacity&&/& &&&input&type=&button&&value=&定位效果&&id=&btnFixed&&/& &&&input&type=&button&&value=&居中效果&&id=&btnCenter&&/& &&&br&/&&br&/&&br&/&&br&/&&br&/&&br&/&&br&/&&br&/&&br&/&&br&/&&br&/&&br&/&&br&/&&br&/&&br&/& &&&select& &&&option&覆盖select测试&/option& &&&/select&& &&&input&name=&&&type=&button&&value=&&打开&&&id=&idBoxOpen&&/& &&&&&/div& &&&&&&&&&script& &&&&var&box&=&new&LightBox(&idBox&); &&&&$(&idBoxCancel&).onclick&=&function(){&box.Close();&} &&$(&idBoxOpen&).onclick&=&function(){&box.Show();&} &&&&$(&btnOverlay&).onclick&=&function(){ &&&&&&box.Close(); &&&&&&if(box.Over){ &&&&&&&&&&box.Over&=& &&&&&&&&&&this.value&=&&打开覆盖层&; &&&&&&}&else&{ &&&&&&&&&&box.Over&=& &&&&&&&&&&this.value&=&&关闭覆盖层&; &&&&&&} &&} &&&&$(&btnOverColor&).onclick&=&function(){ &&&&&&box.Close(); &&&&&&box.Over&=& &&&&&&if(box.OverLay.Color&==&&#fff&){ &&&&&&&&&&box.OverLay.Color&=&&#000&; &&&&&&&&&&this.value&=&&白色覆盖层&; &&&&&&}&else&{ &&&&&&&&&&box.OverLay.Color&=&&#fff&&&&&&&&&&&this.value&=&&黑色覆盖层&; &&&&&&} &&} &&&&$(&btnOverOpacity&).onclick&=&function(){ &&&&&&box.Close(); &&&&&&box.Over&=& &&&&&&if(box.OverLay.Opacity&==&0){ &&&&&&&&&&box.OverLay.Opacity&=&50; &&&&&&&&&&this.value&=&&全透覆盖层&; &&&&&&}&else&{ &&&&&&&&&&box.OverLay.Opacity&=&0; &&&&&&&&&&this.value&=&&半透覆盖层&; &&&&&&} &&} &&&&$(&btnFixed&).onclick&=&function(){ &&&&&&box.Close(); &&&&&&if(box.Fixed){ &&&&&&&&&&box.Fixed&=& &&&&&&&&&&this.value&=&&定位效果&; &&&&&&}&else&{ &&&&&&&&&&box.Fixed&=& &&&&&&&&&&this.value&=&&取消定位&; &&&&&&} &&} &&&&$(&btnCenter&).onclick&=&function(){ &&&&&&box.Close(); &&&&&&if(box.Center){ &&&&&&&&&&box.Center&=& &&&&&&&&&&box.Box.style.left&=&box.Box.style.top&=&&20%&; &&&&&&&&&&box.Box.style.marginTop&=&box.Box.style.marginLeft&=&&0&; &&&&&&&&&&this.value&=&&居中效果&; &&&&&&}&else&{ &&&&&&&&&&box.Center&=& &&&&&&&&&&this.value&=&&重新定位&; &&&&&&} &&} &&&/script& &&&&&/body& &&&/html& &
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：53350次
排名：千里之外
原创：11篇
转载：95篇
(1)(5)(4)(12)(2)(1)(5)(2)(12)(14)(15)(5)(16)(3)(3)(4)(2)}