<style type="text/css">
.pop-box {
z-index: 9999; /*这个数值要足够大,才能够显示在最上层*/
margin-top: 30px;
display: none;
position: absolute;
background: #FFF;
border:solid 1px #6e8bde;
}
.mask {
color:#C7EDCC;
background-color:#C7EDCC;
position:absolute;
top:0px;
left:0px;
opacity:0.6;
filter: Alpha(Opacity=60);
}
</style>
<script language=javascript type="text/javascript">
function hideDiv() {
$("#mask").remove();
$("#pop-div").animate({left: 0, top: 0, opacity: "hide" }, "slow");
}
$(function() {
$('#btnTest').mouseover(function(e){
//var div_obj = $("#"+div_id);
var X = e.pageX;
var Y = e.pageY;//alert(X+","+Y);
$('#pop-div').animate({left:X,top:Y-30,opacity:"show"},"slow");
var windowWidth = document.body.clientWidth;//网页可见区域宽
var windowHeight = document.body.clientHeight;
$("<div id='mask'></div>").addClass("mask")
.width(windowWidth)
.height(windowHeight)
.click(function() {hideDiv(); })
.appendTo("body")
.fadeIn(200);//使用淡入效果显示隐藏的元素
});
})
.pop-box {
z-index: 9999; /*这个数值要足够大,才能够显示在最上层*/
margin-top: 30px;
display: none;
position: absolute;
background: #FFF;
border:solid 1px #6e8bde;
}
.mask {
color:#C7EDCC;
background-color:#C7EDCC;
position:absolute;
top:0px;
left:0px;
opacity:0.6;
filter: Alpha(Opacity=60);
}
</style>
<script language=javascript type="text/javascript">
function hideDiv() {
$("#mask").remove();
$("#pop-div").animate({left: 0, top: 0, opacity: "hide" }, "slow");
}
$(function() {
$('#btnTest').mouseover(function(e){
//var div_obj = $("#"+div_id);
var X = e.pageX;
var Y = e.pageY;//alert(X+","+Y);
$('#pop-div').animate({left:X,top:Y-30,opacity:"show"},"slow");
var windowWidth = document.body.clientWidth;//网页可见区域宽
var windowHeight = document.body.clientHeight;
$("<div id='mask'></div>").addClass("mask")
.width(windowWidth)
.height(windowHeight)
.click(function() {hideDiv(); })
.appendTo("body")
.fadeIn(200);//使用淡入效果显示隐藏的元素
});
})
</script>
<form id="form1" runat="server">
<input type=button id=btnTest value='test'/>
<div id='pop-div' style="width:50px;" class="pop-box">
<span>标题位置</span>
</div>
</form>