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

pcwanli的博客

nx

 
 
 

日志

 
 

js弹出层效果和代码  

2010-12-09 22:01:40|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!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/html; charset=gb2312" />  
<title>JS弹出层</title>  
<script language="javascript">  
function BOX_show(e)//显示   
{   
    if(document.getElementById(e)==null)   
    {   
        return ;   
    }   
    var selects = document.getElementsByTagName('select');   
    for(i = 0; i < selects.length; i++)   
    {   
        selects[i].style.visibility = "hidden";   
    }    
 
    BOX_layout(e);   
    window.onresize = function(){BOX_layout(e);} //改变窗体重新调整位置   
    window.onscroll = function(){BOX_layout(e);} //滚动窗体重新调整位置   
    document.onkeyup = function(event)   
    {   
        var evt = window.event || event;   
        var code = evt.keyCode?evt.keyCode : evt.which;   
        //alert(code);   
 
        if(code == 27)   
        {   
            BOX_remove(e);   
        }   
    }   
 
}   
 
function BOX_remove(e)//移除   
{   
    window.onscroll = null;   
    window.onresize = null;   
    document.getElementById('BOX_overlay').style.display="none";   
    document.getElementById(e).style.display="none";   
 
    var selects = document.getElementsByTagName('select');   
    for(i = 0; i < selects.length; i++)   
    {   
        selects[i].style.visibility = "visible";   
    }   
}   
 
function BOX_layout(e)//调整位置   
{   
    var a = document.getElementById(e);   
 
    if (document.getElementById('BOX_overlay')==null)//判断是否新建遮掩层   
    {   
 
        var overlay = document.createElement("div");   
        overlay.setAttribute('id','BOX_overlay');   
 
        //overlay.onclick=function(){BOX_remove(e);};   
        //a.parentNode.appendChild(overlay);   
        document.body.appendChild(overlay);   
    }   
 
    document.getElementById('BOX_overlay').ondblclick=function(){BOX_remove(e);};   
    //取客户端左上坐标,宽,高   
    var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);   
    var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);   
 
    var clientWidth;   
    if (window.innerWidth)   
    {   
        clientWidth = window.innerWidth;   
       // clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));   
    }   
    else   
    {   
        clientWidth = document.documentElement.clientWidth;   
    }   
 
    var clientHeight;   
    if (window.innerHeight)   
    {   
        clientHeight = window.innerHeight;   
        //clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));   
    }   
    else   
    {   
        clientHeight = document.documentElement.clientHeight;   
    }   
 
    var bo = document.getElementById('BOX_overlay');   
    bo.style.left = scrollLeft+'px';   
    bo.style.top = scrollTop+'px';   
    bo.style.width = clientWidth+'px';   
    bo.style.height = clientHeight+'px';   
    bo.style.display="";   
    //Popup窗口定位   
    a.style.position = 'absolute';   
    a.style.zIndex=999;   
    a.style.display="";   
    //a.style.left = scrollLeft+((clientWidth-a.offsetWidth)/2)+'px';   
    //a.style.top = scrollTop+((clientHeight-a.offsetHeight)/2)+'px';   
}   
 
function HiddenButton(e)   
{   
    e.style.visibility='hidden';   
    e.coolcodeviousSibling.style.visibility='visible'  
}   
</script>  
<style type="text/css">  
 
body{}   
 
#BOX_overlay{position: absolute;z-index: 100;top: 0px;left: 0px;background-color:#ccc;filter: alpha(opacity=70);-moz-opacity: 0.7;opacity: 0.7;}   
 
</style>  
</head>  
 
<body>  
<p onClick="BOX_show('messdiv')"  style="cursor:pointer;">点我就出来</p>  
<div id="messdiv" style="position:absolute; display:none; top:135px; left:350px; width:560px; padding:10px 20px 0; background:#f8e2a0;text-align:left; border:2px solid #5d3f0c;z-index:999; font-size:12px;">  
        <p style="text-align:right; margin:0; padding:0; line-height:14px; float:right;"><a href="javascript:void(0)" title="关闭" style="line-height:14px;font-size:12px; color:#333;" onclick="BOX_remove('messdiv')" target="_self">关闭</a></p>  
<br /><br /><br /><br />这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容<br /><br /><br /><br /><br /><br /><br /><br />  
                   <div style="width:176px;padding:0 120px;overflow:hidden;margin:10px auto 20px;">  
                <a title="关闭窗口" href="javascript:void(0)" onclick="BOX_remove('messdiv')" target="_self"  style=" background:#fff;float:left; width:70px;height:20px;padding:5px 0 0 10px;color:#feeba9;margin-right:10px;"><span style="color:#ffd014;">关闭窗口</span></a>  
 
                <a title="收藏页面" href="javascript:void(0)" onClick="addbookmark()" target="_self" style=" background:#fff;float:left;width:70px;height:20px;padding:5px 0 0 10px;color:#feeba9;"><span style="color:#ffd014;">收藏页面</span></a>  
            </div>  
        <div style="clear:both;"></div>  
</div>  
<div id="BOX_overlay"></div>  
<script type="text/javascript">  
//添加收藏夹   
function addbookmark()   
{   
    var nome_sito = "可咔酷";   
    var url_sito = "http://www.kekaku.com";   
    if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt   
        (navigator.appVersion) >= 4))   
        window.external.AddFavorite(url_sito, nome_sito);   
    else if (navigator.appName == "Netscape")   
        window.sidebar.addPanel(nome_sito, url_sito, '');   
    else   
        alert("Sorry!Cann't Add this site to your favorite!.");   
}   
</script>  
</body>  
</html>  

文章来自:DivAsp.Com http://www.DivAsp.com/,本文地址:http://www.divasp.com/post/197.html
  评论这张
 
阅读(500)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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