html5鼠标点击弹出层,鼠标点击层相关效果代码 - YangJunwei

一个简单的获取鼠标位置：

海波吧 

function x(o)    

{    

document.all.div1.style.visibility="visible";    

document.all.div1.innerText=o.value;    

document.all.div1.style.top=event.clientY;    

document.all.div1.style.left=event.clientX;   

alert(event.clientX+ "  "+event.clientY); 

var a = window.event.x;  

var b = window.event.y;  

alert(a+"  "+ b); 

} 

获取鼠标位置后，我们就可以控制window.open 弹出层的位置

function ccc() 

{ 

k=window.showModalDialog(http://www.baidu.com,null,"dialogwidth:250px;dialogheight:250px;dialogtop:"+   event.screenY+";dialogleft:"   +   event.screenX); 

} 

 

一个弹出层，点击层外面也可以关闭层

HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

海波吧 www.haibor8.cn  

#alert {font-size:12px;border:1px solid #369;width:200px;height:200px;background:#e2ecf5;z-index:1000;position:absolute;}   

  

function hid() 

{ 

var myAlert = document.getElementById("alert");  

myAlert.style.display = "none";  

} 

function onsub(name) 

{ 

 //  mClose.onclick(); 

hid();  

document.getElementById("new_one").value=name.innerText; 

} 

function new_hid() 

{ 

hid();  

} 

 

  

test1

  

test2

  

test3

  

test4

   close  

 

var myAlert = document.getElementById("alert");  

var reg = document.getElementById("new_one");  

var mClose = document.getElementById("close");  

reg.onclick = function()  

{  

myAlert.style.display = "block";  

myAlert.style.position = "absolute";  

myAlert.style.width="200px"; 

//myAlert.style.height="200px"; 

// var a = window.event.x;  

// var b = window.event.y;  

// alert(a+ " "+b); 

myAlert.style.top=event.clientY;   

myAlert.style.left=event.clientX;   

}  

mClose.onclick = function()  

{  

myAlert.style.display = "none";  

}