div做的选择图片的弹出框

做这个的要点是弹出框div的属性.style.position要设置为absolute,.style.zIndex要设置成很大的数,比如1000,10000,因为要在最顶层麻,获取鼠标位置的函数有

window.event.clientX,window.event.clientY(相对客户区的偏移量),window.event.offsetX,window.event.offsetY(相对触发对象的偏移量) window.event.screenX,window.event.screenY(相对于屏幕的偏移量).event还有很多属性:.altKey,.button(0 没按键 1 按左键 2 按右键 3 按左右键 4 按中间键 5 按左键和中间键 6 按右键和中间键 7 按所有的键 ),.cancelBubble(是否取消路由到上层事件),.keyCode 等等

头像文件名用ajax获取.

 

 1/**//*生成一个div做的选择图片的弹出框*/
 2var xmlhttp;
 3function initial() {
 4    var container;
 5    var baseform;
 6    var d = document;
 7    
 8    baseform = document.getElementById("form1");
 9    container = baseform.appendChild(d.createElement("div"));
10    //背景框
11    container.id = "container";
12    container.style.zIndex = 1000;
13    container.style.left = window.event.clientX + "px";
14    container.style.position = "absolute";
15    container.style.top = window.event.clientY + "px";
16    //container.style.backgroundColor = "Red";
17    container.onmouseleave = function() { hiddenpopup(); };
18    //修饰背景框
19    container.style.borderStyle = "outset";
20    container.style.borderWidth = "3px";
21    container.style.borderColor = "AntiqueWhite ";
22    //document.body.style.borderc
23    getHeaderImg();
24    
25}
26
27function unload() {
28    //document.removeChild(document.getElementById("container"));
29   
30}
31
32function showpopup() {
33    if(!document.getElementById("container"))
34        initial();
35    container.style.left = window.event.clientX + "px";
36    container.style.top = window.event.clientY + "px";
37    document.getElementById("container").style.visibility = "visible";
38    
39}
40
41function hiddenpopup() {
42    container.style.left = window.event.clientX + "px";
43    container.style.top = window.event.clientY + "px";
44    document.getElementById("container").style.visibility = "hidden";
45}
46
47
48//ajax获取头像数据
49function getHeaderImg() {
50    try {
51            xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");
52        } catch (e) {
53                        try {
54                                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
55                            } catch (e) {
56                                            xmlhttp = false;
57                                        }
58                    }
59
60    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
61        xmlhttp = new XMLHttpRequest();
62    }
63
64    xmlhttp.open("POST", "getHeaderImg.ashx", true);
65    xmlhttp.onreadystatechange = _getHeaderImgCallBack;
66    xmlhttp.send();
67}
68
69function _getHeaderImgCallBack() {
70    if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
71        rep = xmlhttp.responseText;
72        document.getElementById("container").innerHTML = rep;
73    }
74}
75