全屏窗口点击事件,隐藏你的隐私
难点:
定位
clientX、Y
兼容问题
开始正题
css简单装饰一下页面跟点击出现的窗口
.s{
width:100%;
height:100%;
}
.boxs{
width:300px;
height:510px;
display:none;
position:absolute;
}
.box{
width:300px;
height:100px;
border:1px solid #CCC;
text-align: center;
line-height: 100px;
}
html高仿一下网页右键出现的窗口样式
<div class="s" >
<div class="boxs" id="con">
<div class="box">源代码查询</div>
<div class="box">源代码查询</div>
<div class="box">源代码查询</div>
<div class="box">源代码查询</div>
<div class="box">源代码查询</div>
</div>
</div>
script中,主要是全窗口点击事件。。。详情看下↓
window.oncontextmenu = function(e){ //窗口右键点击事件
var e = e || event; //解决兼容
var X = e.clientX; //鼠标箭头距离网页左窗口边的距离
var Y = e.clientY; //鼠标箭头距离网页上窗口边的距离
con.style.display = "block"; //css中已经隐藏(none),现在(block)显示
con.style.top = Y+"px"; //确定X距离,点击是距离多少出现多少
con.style.left = X+"px"; //确定Y距离,点击是距离多少出现多少
return false; //返回false
}
document.onclick = function(){ //文档点击事件
con.style.display = "none"; //再次隐藏
}