注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

gmd20的个人空间

// 编程和生活

 
 
 

日志

 
 

hao123右上角,的“我的hao123” 的弹窗层显示实现  

2008-11-04 14:21:59|  分类: 程序设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

自己到 www.hao123.com看效果

他是用了两个层,一个透明层覆盖了 其他的 页面元素,让用户不能操作其他的页面元素了, 也算是一个特点吧。可以看到 z-index 这个css属性,让他可以覆盖在其他页面上面,opacity 透明显示。
另外一个div是上面那个div的子div, 用来显示东西。
关键的部分如下,自己看吧。
-------------------------------------------------------
<div style="width: 100%; height: 1268px; position: absolute; background-color: rgb(255, 255, 255); opacity: 0.4; z-index: 65534;" id="showDiv2"/>

<div style="border: 2px solid rgb(123, 214, 118); position: absolute; width: 800px; height: 735px; z-index: 65535; left: 103.5px; top: 295px;" id="showDiv"><iframe frameborder="0" width="100%" scrolling="no" style="height: 100%;" id="ifr" src="templ.htm"/></div>

</div>

-------------------------------------------------------------
openGX:function(){
var ifr=G("ifr");
if(ifr.src!="templ.htm")ifr.src="templ.htm";
var divObj=G("showDiv");   //用来getElementById来获取元素的
var divObj2=G("showDiv2");
divObj.style.display="";
divObj2.style.display="";
divObj.style.height="735px";
divObj.style.left=(document.body.offsetWidth-800)/2+'px';
if(this.isIE){
divObj.style.top=((document.body.offsetHeight-705)/2+300)+'px'
}else{
divObj.style.top=((document.body.offsetHeight-705)/2)+'px'
}
document.body.scrollTop=200;
return false},

-------------------------------------------------
closeGXDiv:function(){
var divObj=G("showDiv");
var divObj2=G("showDiv2");
divObj.style.display="none";
divObj2.style.display="none"}

--------------------------------------

  评论这张
 
阅读(670)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017