Div+Css+JS做弹出窗口

#divbg
        
{
            width
: 100%;
            height
: 100%;
            position
: absolute;
            z-index
: 999;
            top
: 0px;
            left
: 0px;
            filter
: alpha(opacity=50);
            opacity
: 0.5;
            background-color
: #AAAAAA;
        
}
        #diveditcontent
        
{
            width
: 630px;
            height
: 150px;
            position
: absolute;
            z-index
: 1000;
            background-color
: #444444;
        
}
        #divheader
        
{
            width
: 100%;
            height
: 25px;
            background-color
: #BB5500;
        
}

 

 

 

 

 

<div id="divbg" style="display: none;">
</div>     //弹出窗口的背景(遮挡当前页)
<div id="diveditcontent" style="display: none;">        //窗口内容页
        
<div style="margin-right: 3px; margin-bottom: 3px; width: 99.7%">
            
<div id="divheader" title="Move>">    //窗口标题行
                
<div style="float: left; margin-top: 5px; margin-left: 3px;">
                    
<strong>
                        Edit
</strong></div>
                
<div style="float: right; margin-top: 5px; margin-right: 3px;">
                    
<href="#" onclick="Hide();" title="Close"><strong>X</strong></a></div>  //关闭
            
</div>
            
<div id="divcontent">  //内容
            
</div>
        
</div>
    
</div>

<script type="text/javascript">
        
var divheader = document.getElementById("divheader");
        
var divbg = document.getElementById("divbg");
        
var diveditcontent = document.getElementById("diveditcontent");
        
var selects = document.getElementsByTagName("select");
        
var divcontent = document.getElementById("divcontent");
        
function Show(Key) {

            divbg.style.display 
= "";
            divbg.style.width 
= document.body.offsetWidth;  //浏览器宽度(滚动条+clientwidth+边框)
            divbg.style.height = document.body.offsetHeight;

            diveditcontent.style.display 
= "";
            diveditcontent.style.top 
= "50px";   //弹出窗口位置
            diveditcontent.style.left = "100px";


            
for (var i = 0; i < selects.length; i++) {
                selects[i].style.display 
= "none";      //遮住下拉框
            }

            divcontent.innerHTML 
= "<iframe frameborder=0 scrolling=no src='PriceEdit.aspx?Key=" + Key + "' width='100%' height='100%'></iframe>";
            
//嵌入页

        }
        
function Hide() {
            
//隐藏窗口
            document.location = location.reload();
            divbg.style.display 
= "none";
            diveditcontent.style.display 
= "none";

            
for (var i = 0; i < selects.length; i++) {
                selects[i].style.display 
= "";
            }


        }
        divheader.onmousedown 
= Down;
        
//以下是拉窗口自由移动
        var th;
        
var tw;
        
function Down(e) {

            
var event = window.event || e;
            th 
= event.clientY - parseInt(diveditcontent.style.top.replace(/px/""), 10);
            tw 
= event.clientX - parseInt(diveditcontent.style.left.replace(/px/""), 10);
            document.onmousemove 
= Move;
            document.onmouseup 
= Up;
            document.onmouseout 
= Up;
            
function Move(e) {

                
var event = window.event || e;
                
var top = event.clientY - th;
                
var left = event.clientX - tw;
                top 
= top < 0 ? 0 : top;
                top 
= top > document.body.offsetHeight - 220 ? document.body.offsetHeight - 220 : top;

                left 
= left < 0 ? 0 : left;
                left 
= left > document.body.offsetWidth - 630 ? document.body.offsetWidth - 630 : left;

                diveditcontent.style.top 
= top + "px";
                diveditcontent.style.left 
= left + "px";
            }

            
function Up() {
                document.onmousemove 
= null;
            }
        }

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭