弹出框适应窗口大小（2）

上一遍的代码：

弹出框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>