上一遍的代码:
弹出框css(这个框能悬浮在网页上面):
<style type="text/css">
#messageDiv {position: absolute;font-size: 9pt;background-color: #EEF4F5;padding: 5px;border: 1px solid #F5C66B;
line-height: 160%;width: 260px;display:none;}
</style>
<div id="messageDiv">
<span>请输入屏蔽的原因:</span>
<select id="reasonSelector">
<option value="1" selected="selected">图片附带联系方式(QQ,微信,电话等)</option>
<option value="2">图片涉及色情、暴力。</option>
<option value="3">无效图片(不通的号码相同的头像等)</option>
<option value="4">性别不符</option>
<option value="5">其他</option>
</select>
<span id="reasonTip" style="display: none;">其他原因:</span>
<!-- 要屏蔽的用户ID -->
<input type="hidden" id="shildUserId" value="0"/>
<input type="text" id="reason" style="display: none;" size="32"/>
<input type="button" value="确定" id="shieldButton"/>
<input type="button" value="取消" id="cancelButton"/>
</div>
Html调用代码:
<a href="#" οnclick="showMessage('50',event)">屏蔽 </a>
JS代码:
<script type="text/javascript">
$(document).ready(function(){
$("#reasonSelector").change(function(){
var value = $(this).val();
if(value == 5){ //其他
$("#reasonTip").css("display" ,"block");
$("#reason").css("display" ,"block");
}else{
$("#reasonTip").css("display" ,"none");
$("#reason").css("display" ,"none");
}
});
$("#shieldButton").click(function(){
var userId = $("#shildUserId").val();
var content = null;
var contentId = $("#reasonSelector :selected").val();
if(contentId == 5){
content = $("#reason").val();
if(content == null || content ==""){
alertMsg.info("请输入屏蔽的原因");
return;
}
}else{
content = $("#reasonSelector :selected").text();
}
//调用函数屏蔽用户
banUserAndRecord(userId,content);
hides();
});
$("#cancelButton").click(function(){
hides();
});
/**如果不直接在标签a上加onclick时间,可以用这种方法,注意传递鼠标事件**/
/**只是这种方法就不能很好的传递用户ID **/
// $(".shieldLink").click(function(event){
// var display = $("#messageDiv").css("display"); //如果元素为隐藏,则将它显现
// if(display == 'none'){
// //如果元素为隐藏,则将它显现
// $("#messageDiv").css("top", mousePos(event).y + 10 + "px")
// .css("left", mousePos(event).x + "px").css("display", "block");
// }else{
// $("#messageDiv").hide(); //如果元素为显现,则将其隐藏
// }
// });
});
/**点击屏蔽链接的时候弹出对话框(id为要屏蔽的用户id,event为鼠标事件)**/
function showMessage(id,event){
//如果元素为隐藏,则将它显现
var display = $("#messageDiv").css("display");
if(display == 'none'){
//鼠标的位置(通过调用函数得到鼠标的坐标)
var x = mousePos(event).x;
var y = mousePos(event).y;
//偏移值(主要因为左边有一个导航栏,以及上边有条件查询以及logo,故有偏移值
//获取鼠标位置这个函数可能可以优化,不计算偏移值,那么就可以省去偏移量,
//现在这种做法还有确定,就是左边的导航栏不可以变动,不然偏移值就不准了
//因为时间关系,不去优化,具体可以参照上篇发的那个位置图修改鼠标位置的值
var xOffset = 210;
var yOffset = 75;
//弹出框的位置
var top = 0;
var left = 0;
//弹出框的大小
var boxWidth = 300;
var boxHight = 130;
//可见网页的大小,高度我试遍了js所有的写法,还是不行,
//只能用jquery,jquery这个函数是行得通的
var clientWidth = document.body.clientWidth;
var clientHeight = $(window).height();
//如果弹出框宽度要溢出
if(x + boxWidth > clientWidth){
left = clientWidth - boxWidth - xOffset;
}else{
left = x - xOffset;
}
//如果弹出框高度要溢出
if(y + boxHight > clientHeight){
top = clientHeight - boxHight - yOffset;
}else{
top = y - yOffset;
}
//赋值隐藏值
$("#shildUserId").val(id);
//定位弹出框并显示
$("#messageDiv").css("top", top + "px").css("left", left + "px").css("display", "block");
}else{
$("#messageDiv").hide(); //如果元素为显现,则将其隐藏
}
}
//方法1
function mousePos(e) {
var x, y;
var e = e || window.event;
return {
x : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
y : e.clientY + document.body.scrollTop + document.documentElement.scrollTop
};
};
//方法2
//Firefox支持属性pageX,与pageY属性,这两个属性已经把页面滚动计算在内了,
//在Chrome可以通过document.body.scrollLeft,document.body.scrollTop计算出页面滚动位移,
//而在IE下可以通过document.documentElement.scrollLeft ,document.documentElement.scrollTop
function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//alert('x: ' + x + '\ny: ' + y);
return {
'x' : x,
'y' : y
};
}
function hides() {
$("#messageDiv").css("display", "none");
};
</script>