zoukankan      html  css  js  c++  java
  • div弹出层,待优化

    function getCurrentStyle(ele,name){ 
                
    if(typeof(ele)=="string")
                {
                    ele
    =document.getElementById(ele);
                }
                
    if(document.all)
                {               
                    
    return ele.currentStyle[name];
                }
                
    return  document.defaultView.getComputedStyle(ele, null)[name];
            }
            
            
    function update()
            {
                show(
    "layer");   
            }
            
            
    //弹出层
            function show(divID,relativeTop,relativeLeft,width,height) {
                lock();
                
    if(!width)
                {
                    width
    =300;
                }
                
    if(!height)
                {
                    height
    =150;
                }
                
    var divLayer = document.getElementById("divLayer");    
                
    if (divLayer) {
                    divLayer.style.display 
    = "block";

                    
    var arr = divLayer.getElementsByTagName("div");
                    
    for (var i = 0; i < arr.length; i++) {
                        arr[i].style.display 
    = "block";
                    }
                } 
    else {
                    divLayer 
    = document.createElement("div");
                    divLayer.id 
    = "divLayer";//border-color: #E78F08 #E78F08 #EAA12A;border-style: solid;border- 1px
                    divLayer.innerHTML="<h4 id='divLayer_h' style='background:none repeat scroll 0 0 #F7B64B;padding:2px 10px;color:white;height:18px;line-height:18px;margin:0;font-size:14px;border-color: #E78F08 #E78F08 #EAA12A;border-style: solid;border- 1px;'><a href='javascript:divClose();' style='text-align:center;text-decoration:none;background-color:white;color:#C77405;font-size:14px;font-family:arial;height:14px;line-height:14px;overflow:hidden;float:right;14px;' title='关闭窗口'>&times;</a>提示</h4>";
                    divLayer.innerHTML 
    +="<div style='border: 1px solid #CCCCCC;' id='divLayer_Content'>"+document.getElementById(divID).innerHTML+"</div>";    
                    divLayer.style.width
    =width+"px";
                    divLayer.style.height
    =height+"px";        
                    divLayer.style.backgroundColor
    ="white";
                    divLayer.style.boxShadow
    ="1px 2px 2px #555555";
                    divLayer.style.zIndex
    =parseInt(document.getElementById("divLock").style.zIndex)+1;
                    divLayer.style.position
    ="absolute";  
                    divLayer.style.border
    ="medium none";                
                    
    //设置弹出层与页面顶部的距离
                    if(relativeTop)
                    {
                        divLayer.style.top
    =relativeTop+"px";
                    }
    else
                    {   
                        divLayer.style.top
    ="50%";
                        divLayer.style.marginTop
    ="-"+height*0.5+"px";
                        
                    }   
                    
    //设置弹出层与页面左侧的距离
                    if(relativeLeft)
                    {
                        divLayer.style.left
    =relativeLeft+"px";
                    }
    else
                    {    
                        divLayer.style.left
    ="50%";    
                        divLayer.style.marginLeft
    ="-"+width*0.5+"px";                    
                    }   
                    insertLayer(divLayer,document.body);   
                    
                    
                    
    /*
                    var contentHeight=getIntByPx(getCurrentStyle(divLayer,"height"))-getIntByPx(getCurrentStyle("divLayer_h","height"))-getIntByPx(getCurrentStyle("divLayer_h","paddingTop"))-getIntByPx(getCurrentStyle("divLayer_h","paddingBottom"));
                    alert(contentHeight);
                    
    */
                    
    var contentHeight=getIntByPx(getCurrentStyle(divLayer,"height"))-document.getElementById("divLayer_h").offsetHeight-2;            
                    document.getElementById(
    "divLayer_Content").style.height=contentHeight+"px";
                }
            }


            
    function getIntByPx(px)
            {
                
    return parseInt(px.substring(0,px.length-2))
            }
            
            
    //关闭弹出层
            function divClose() {
                
    var divLayer = document.getElementById("divLayer");    
                
    var divLock = document.getElementById("divLock");    
                
    if (divLayer) {
                    divLayer.style.display 
    = "none";
                    divLock.style.display 
    = "none";
                }
            }
            
            
    //遮盖层
            function lock() {
                
    var divLock = document.getElementById("divLock");
                
    if (divLock) {
                    divLock.style.display 
    = "block";
                } 
    else {
                    divLock 
    = document.createElement("div");
                    divLock.id
    ="divLock";
                    divLock.style.width 
    = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth)+"px"
                    divLock.style.height 
    = getBodyHeight()+"px";
                    divLock.style.verticalAlign
    ="middle";
                    divLock.style.position 
    = "absolute";
                    divLock.style.backgroundColor 
    = "black";
                    divLock.style.filter 
    = "alpha(Opacity=40)";
                    divLock.style.top 
    = "0px";
                    divLock.style.left 
    = "0px";
                    divLock.style.opacity 
    = " 0.4";        
                    divLock.style.zIndex 
    = "1";
                    document.body.appendChild(divLock);                
                }
            }  
            
            
    //获取body的高度
            function getBodyHeight()
            {
                 
    //如果是IE
                 if(document.all)
                 {
                    
    return  Math.max(document.body.scrollHeight, document.documentElement.scrollHeight,document.documentElement.clientHeight);
                 }

                 return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
            }  
            
            
    function insertLayer(divLayer,parent)
            {
                
    //将此div插入到指定父元素的第一个元素之前
                if(parent.childNodes[0])
                {                   
                    parent.insertBefore(divLayer,parent.childNodes[
    0]);
                }
    else
                {
                    parent.appendChild(divLayer);
                }
            }
  • 相关阅读:
    SQL中Group By的使用
    sqlserver中distinct的用法(不重复的记录)
    ASP.NET控件的ID,ClientID,UniqueId的区别
    四大线程池的简单使用
    Dex文件方法数超过65536怎么破?
    Context的正确使用
    dialog的各类显示方法
    JAVA小记(一)
    Horspool和BM算法解析
    安卓中Canvas实现清屏效果
  • 原文地址:https://www.cnblogs.com/mxw09/p/1870002.html
Copyright © 2011-2022 走看看