Summarize experience; first you need a mask to achieve a gray background.We can create a DIV with a z-index higher than the other layers.Then set to absolute positioning.Next, get the height of the page and use it as the height of this DIV.So the background layer is OK.

Background layer structure:

<div id="windownbg" style="height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901"></div>

Then the structure of the pop-up layer:

1.<div id="windown-box">
2.    <div id="windown-title">
3.        <h2></h2>
4.        <span id="windown-close">Close</span>
5.    </div>
6.    <div id="windown-content-border">
7.        <div id="windown-content"></div>
8.    </div>
9.</div>

We append this structure to the body through jQuery's "append" method; we then locate it; it's a bit complicated.It's easy to fix the vertical center. Everyone knows you can set its position to fixed, set its top and left to 50%, and then margin minus one-half its own width will do.However, fixed is not supported in IE6, and its top algorithm is different from FF in IE6.FF.top:50% starts at the top of the current page's visual content, while IE6 starts at the top of the entire document.If you pull the scrollbar to the bottom.Then pop up the window.You will find that the layer popped up by IE6 is not visible.Because it's on top.This is the middle position when there is no scrollbar on the first screen.So in IE6, this height has to be calculated separately.Its top is actually equal to its own height divided by two plus the height of the scrollbar.

1.if ( _version == 6.0 ) {
2.    $("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
3.}else {
4.    $("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
5.};

The positioning problem is solved.All that remains is to get the content and some additional effects.There are five types of content you can set here.text, ID, img, url, iframe.Additional effects drag and close automatically.Dragging this thing is a bit complicated.But understanding the principles is not complicated.First, get the offsetLeft and offsetTop values of the object.These two values are the distance from the object to the left and top of the browser window.Then bind the mouse event and calculate the current mouse coordinates clientX, clientY when pressed.New coordinates moveX, moveY are obtained by calculating the difference between these two parameters.When the mouse drags.Calculates the difference between the current mouse coordinate and the previously obtained moveX, moveY.This value is the new coordinate of the object.Drag and drop the character value to the top and left of the object.

1.DragHead.onmousedown = function(e) {
2.    if(drag == "true"){moveable = true;}else{moveable = false;}
3.    e = window.event?window.event:e;
4.    var ol = Drag_ID.offsetLeft, ot = Drag_ID.offsetTop-moveTop;
5.    moveX = e.clientX-ol;
6.    moveY = e.clientY-ot;
7.    document.onmousemove = function(e) {
8.        if (moveable) {
9.            e = window.event?window.event:e;
10.            var x = e.clientX - moveX;
11.            var y = e.clientY - moveY;
12.            if ( x > 0 &&( x + sw < cw) && y > 0 && (y + sh < ch) ) {
13.                Drag_ID.style.left = x + "px";
14.                Drag_ID.style.top = parseInt(y+moveTop) + "px";
15.                Drag_ID.style.margin = "auto";
16.            }
17.        }
18.     }
19.}

It's easy to turn it off automatically.Is a setTimeout

Auto-close code:

1.var closeWindown = function() {
2.        $("#windownbg").remove();
3.        $("#windown-box").fadeOut("slow",function(){$(this).remove();});
4.    }
5.    if( time == "" || typeof(time) == "undefined") {
6.        $("#windown-close").click(function() {
7.            $("#windownbg").remove();
8.            $("#windown-box").fadeOut("slow",function(){$(this).remove();});
9.        });
10.    }else { 
11.        setTimeout(closeWindown,time);
12.    }

Click on the link below for a detailed presentation

http://leotheme.cn/wp-content/uploads/Example/js/tipswindown/