<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//触发class = c 的点击事件
$(".c").click(function(){
checkDiv($(this));
});
//给DOM绑定点击事件
$(document).bind(‘click‘,function(e){
//获取当前点击元素的class
var v_id = $(e.target).attr(‘class‘);
//如果class != c 隐藏DIV
if(v_id != ‘c‘){
$("#show").hide();
}
})
});
//显示被隐藏的DIV
function checkDiv(obj){
//获取当前点击的位置
var offset = obj.offset();
//给要显示的DIV设置左边距
var left = offset.left;
var intleft = parseInt(left) + 15;
//给要显示的DIV设置上边距
var top = offset.top;
var inttop = parseInt(top) +15;
$("#show").show();
$("#show").css({
"background-color":‘#33ee33‘,
"position":‘absolute‘,
"z-index":10,
"top":inttop,
"left":intleft
});
}
</script>
<div id="big">
<div>
aaaaaaaaaaaaaaaaaaaaaaaaaa<br>
bbbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
</div>
<div id="show" style="display:none;border:1px solid red;">
要显示的内容
</div>
</div>
</body>
</html>
提示信息