js自定义弹框

使用js自定义一个弹出框，当滚动条下拉后，再点按钮显示该弹出框时，相对位置不变。

思路：1、打开页面时先选好固定位置，

           2、获取滚动条顶部的位置，

           3、显示弹框时，弹框使用固定位置的高度+滚动条顶部的位置。

         

     <style type="text/css">
        #contes { /* 弹框的页面*/
            width: 500px; /*宽度*/
            background: #fff; /*背景色*/
            display: none; /*隐藏*/
            z-index: 3; /*覆盖*/
            position: absolute;
            top:100px;
            left:30%; /* 定位*/
        }
        .mybtn{
            padding:3px 6px;
            background-color: #49aaf3;
            color:white;
            font-size:14px;
        }
    </style>

---

<input type="button" value="录入SN号" class="s6" οnclick="javascript:inputSn('<s:property value="id"/>','<s:property value="itemQty"/>','<s:property value="itemCode"/>')"/>

    <!--  弹框的div -->
    <div id="contes" style="border: 2px solid #49aaf3;">
        <div style="height:30px;background-color:#49aaf3;">
               <font style="float:left;margin:5px;color:white;">录入SN号</font> 
               <a href="javascript:closeDialog()" style="float:right;margin:5px;color:red">关闭</a>
        </div>
        <form style="width:480px;">
            <div id="minput" style="text-align:center;">
            </div>
            <div style="margin-top:30px;float:right;">
                 <input class="mybtn" type="button" οnclick="javascript:closeDialog()" value="取消"/>
                 <input class="mybtn" type="submit" value="保存"/>
            </div>
         </form>
    </div>

---

<script language=JavaScript>

function inputSn(id,itemQty,itemCode){
    var div = document.getElementById("minput");
    var count = parseInt(itemQty);
    div.innerHTML="";
    var lab = document.createElement("label");  
    lab.innerText = itemCode;
    lab.style.color="red";
    div.appendChild(lab); 
     //换行  
    var br = document.createElement("br");  
    div.appendChild(br); 
    for(var i=1;i<=count;i++){
        var lab1 = document.createElement("label");  
        lab1.innerText = "硬件"+i+":";
        div.appendChild(lab1);  
        var ipt = document.createElement("input");
        ipt.setAttribute("type","text");
        ipt.setAttribute("name","test");
        div.appendChild(ipt);
         //换行  
        var br = document.createElement("br");  
        div.appendChild(br); 
        var lab2 = document.createElement("label");  
        lab2.innerText = "软件"+i+":";
        div.appendChild(lab2); 
        var ipt1 = document.createElement("input");
        ipt1.setAttribute("type","text");
        ipt1.setAttribute("name","test");
        div.appendChild(ipt1);
        //换行  
        var br = document.createElement("br");  
        div.appendChild(br); 
        var br = document.createElement("br");  
        div.appendChild(br);  
    }
    var scro = getScrollTop();
    document.getElementById('contes').style.top=100+scro;
    document.getElementById('contes').style.display = 'block';
}

function closeDialog(){  //关闭弹窗
     document.getElementById('contes').style.display = 'none';
}
function getScrollTop(){   //获取滚动条位置 
    var scrollTop=0;    
    if(document.documentElement&&document.documentElement.scrollTop){    
        scrollTop=document.documentElement.scrollTop;    
    }else if(document.body){    
        scrollTop=document.body.scrollTop;    
    }    
    return scrollTop;    
} 
</script>