笔记-ajax创建弹出层-修改手机

/**
 *点击查询时调用的Ajax
 */
function push(){
	if(!tochecke()) return false;
	var userId = $('#userId').val();
	var tel = $('#userTel').val();
	$.ajax({     
            type:"post",     
            dataType:"html",     
            url:"url",
            async:false,
            cache:false,
            timeout:80000,     //ajax请求超时时间80秒     
            data:{
            	Id : Id
            	}, //40秒后无论结果服务器都返回数据     
            success:function(data){ //从服务器得到数据，显示数据并继续查询     
                 closeTel()
		 alert(data);
            },     
           error:function(data){ //Ajax请求超时，继续查询
                 closeTel();
		 alert("链接有误，请查看网络链接");
         	}     
        });
} 
/**
 * 修改手机号-start 
 * @param {Object} userId
 */ 
function updateTelShow(userId){
	$.ajax({
			url:"url",
			type:"post",
			dataType:"html",
			data:{
				id:id
			},
			async: false,
			success:function(data){
			$('body').append(data);
			creatediv();
			$("body").css({overflow:"hidden"}); 
			$('#updateTel').css({
				top:ScrollTop()+100,
				left:ScrollLeft()+200
				});
				//初始化绑定手机输入框
				telBind();
			}
		});
}

/**
 * 验证手机号唯一
 */
function tochecke(){
	var tel = $('#userTel').val();
	if('' == $.trim(tel) || '手机号' == tel){
			alert("手机号不能为空!");
			$("#userTel").focus(); 
		return false;
	}
	if(!tel.match(/^1[3|4|5|8][0-9]\d{4,8}$/)){
		alert("手机号码格式不正确!");
		$("#userTel").focus(); 
		return false;
	}
	return true;
}

/**
 * 绑定手机号 
 */
function telBind(){
	//手机号输入框绑定
	$("#userTel").bind({
		click : function(){
				var tel = $('#userTel').val();
			  	if('手机号' == tel){
					$('#userTel').val('');
					$('#userTel').focus();
				}
			},
		blur : function(){
				var tel = $('#userTel').val();
				if('' == $.trim(tel)){
					$('#userTel').focus();
					$('#userTel').val('手机号');
				}
			},
		keydown : function (e) {  //只能输入数字
				var code = (e.keyCode ? e.keyCode : e.which);
		        if (code >= 96 && code <= 105 || code >= 48 && code <= 57 || code == 8 || code==110 || code==190) {  
		            return true;  
		        } else {  
		        	alert("只能输入数字");
					$('#userTel').focus();
					$('#userTel').val('手机号');
		            return false;  
		        }  
		    }
		});
}
/**
 * 创建动态div锁闭屏幕
 */
var creatediv = function(){
    var parentdiv = $('<div></div>');
    parentdiv.attr('id', 'parent'); //给div设置id
    parentdiv.css({
	   'position':'absolute',　
	   'left':'0',
	   'top':'0',
	   'width':$(document).width(),
	   'height':$(document).height(),
	   'background-color':'#DBDBDB',
	   'filter':'alpha(opacity=20)',
	   'z-index': '10',
	   'opacity': '0.5'  
		
	}); //添加css样式
    $('body').append(parentdiv);//将父div添加到body中
}
/**
 * 关闭按钮和取消
 */
function closeTel(){
	$('#updateTel').remove();
	$('#parent').remove();
	$("body").css({overflow:''}); 
}
/**
 * 滚动条向下滚动
 */
var ScrollTop = function() {
    if ('pageYOffset' in window) {
        return window.pageYOffset;
    } else if (document.compatMode === "BackCompat") {
        return document.body.scrollTop;
    } else {
        return document.documentElement.scrollTop;
    }
}
/**
 * 滚动条向右滚动
 */
var ScrollLeft = function() {
    if ('pageXOffset' in window) {
        return window.pageXOffset;
    } else if (document.compatMode === "BackCompat") {
        return document.body.scrollLeft;
    } else {
        return document.documentElement.scrollLeft;
    }
}

对应的css

/*-------------修改手机号----------------*/
.join_fadeout{ width:335px; padding-bottom:15px;  overflow:hidden; border:4px solid #ddd; background:#fff; position:absolute; top:15%; left:39%; z-index:11;}
/* 浮动定义 */
.fl{ float:left;}
.fr{ float:right;}
.fm{ margin:0 auto;}
.title_back {
    background: none repeat scroll 0 0 #F3F3F3;
    color: #595959;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 20px;
    vertical-align: middle;
}
.W_close,.W_true{ line-height:23px;}
.W_close {
    background:url(/nacecsns/resource/images/web/microGroup/all_r_btn.gif);
	color:#595959;
    cursor: pointer;
    display: block;
    height: 22px;
    line-height:16px;
    width: 60px;
	border:1px solid #ddd;
	border-radius:5px;
}
.W_true {
    background:url(/nacecsns/resource/images/web/microGroup/join_green_btn.gif) repeat-x;
	color:#FFF;
    cursor: pointer;
    display: block;
    height: 22px;
    line-height:16px;
    width: 60px;
	border:1px solid #4ec000;
	border-radius:5px;
}
.W_bianju{margin-left:15px;}
.join_main{ padding-top:10px;overflow:hidden;}
.join_main strong{ font-size:24px; font-family:Georgia, "Times New Roman", Times, serif}
.join_main span{ display:block;}
.join_main,.join_input_m{width:300px; display:block;}
.join_main_code{ padding:8px 5px 0 0;}
.join_main_textarea{ width:300px; border:1px solid #ddd;}
.join_input_text{ width:104px; height:24px; border:1px solid #ddd;}
.join_input_text_answer{ width:300px; height:24px; border:1px solid #ddd;}
.join_close_btn{ width:8px; height:8px; background:url(/nacecsns/resource/images/web/microGroup/join_close_btn.gif) no-repeat; border:none; margin:10px;}