<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="http://image.yihaodianimg.com/statics/global/css/global_site_simple.css?142723">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<title>无标题文档</title>
<style>
.popbox{width:450px; border:1px solid #B3B3B3;position:absolute;left:50%; margin-left:-225px; background:#FFF; z-index:9999;-moz-box-shadow: 3px 3px 4px #ccc;-webkit-box-shadow: 3px 3px 4px #ccc;box-shadow: 3px 3px 4px #ccc; filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=4);}
.pop_tit{background-color:#900; color:#FFF; height:27px; line-height:27px; padding:0px 10px; cursor:move;}
.pop_tit a{background:url(http://image.yihaodianimg.com/images/v2/ad/close_bg.jpg) no-repeat right 7px; float:right; color:#FFF; padding-right:17px;}
.pop_tit a:hover{ color:#FFF;}
.pop_content{padding:10px 20px; background-color:#FFF;}
.btn_box{text-align:center; margin:10px 0px;}
.btn_box a{background:url(images/sprites.gif) no-repeat; width:55px; height:27px; display:inline-block; color:#FFF; line-height:27px; text-align:center;}.btn_box a:hover{text-decoration:none; color:#FFF;}
.sure{ background-position:0px 0px;}
.cancel{ background-position: -55px 0px;}
/*遮罩层*/
.mask{z-index:999;background-color:#000;position:absolute;top:0px; left:0px;filter:alpha(opacity=10);-moz-opacity:0.1;-khtml-opacity: 0.1;opacity: 0.1;}
.ifm{position:absolute; z-index:99;position:absolute;top:0px;left:0px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity:0;}
</style>
</head>
<body>
<input type="text" /><span style="color:#F00;">哈哈哈哈哈</span><input type="button" value="显示弹出层" id="show"/><select><option>我是下拉框</option></select>
<p style="height:2500px;"></p>
<iframe class="ifm"></iframe>
<div class="mask"></div>
<div class="popbox">
<p class="pop_tit"><a href="###" id="close">关闭</a>请输入邮政编码进行地区查询</p>
<div class="pop_content">我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦
</div>
<div class="btn_box">
<a href="###" class="sure">确 定</a>
<a href="###" class="cancel">取 消</a>
</div>
</div>
</body>
<script>
$(function(){
var windowHeight = document.documentElement.clientHeight;
var windowWidth = document.documentElement.clientWidth;
var htmlHeight = $(document).height();
var popupHeight = $(".popbox").height();
$(".popbox").css({
"top": windowHeight/2-popupHeight/2
});
$(".mask").css({
"height": htmlHeight,
"width": windowWidth
});
$(".ifm").css({
"height": htmlHeight*0.99,
"width": windowWidth*0.99
});
$(".popbox").hide();
$(".ifm").hide();
$(".mask").hide();
$("#show").click(function(){
$(".popbox").show();
$(".ifm").show();
$(".mask").show();
})
$("#close").click(function(){
$(".popbox").hide();
$(".ifm").hide();
$(".mask").hide();
})
/*拖动*/
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(".pop_tit").click(function(){
//alert("click");//点击（松开后触发）
}).mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($(".popbox").css("left"));
_y=e.pageY-parseInt($(".popbox").css("top"));
$(".popbox").fadeTo(20, 0.25);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$(".popbox").css({top:y,left:x});//控件新位置
}
}).mouseup(function(){
_move=false;
$(".popbox").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
})
</script>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="http://image.yihaodianimg.com/statics/global/css/global_site_simple.css?142723">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<title>无标题文档</title>
<style>
.popbox{width:450px; border:1px solid #B3B3B3;position:absolute;left:50%; margin-left:-225px; background:#FFF; z-index:9999;-moz-box-shadow: 3px 3px 4px #ccc;-webkit-box-shadow: 3px 3px 4px #ccc;box-shadow: 3px 3px 4px #ccc; filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=4);}
.pop_tit{background-color:#900; color:#FFF; height:27px; line-height:27px; padding:0px 10px; cursor:move;}
.pop_tit a{background:url(http://image.yihaodianimg.com/images/v2/ad/close_bg.jpg) no-repeat right 7px; float:right; color:#FFF; padding-right:17px;}
.pop_tit a:hover{ color:#FFF;}
.pop_content{padding:10px 20px; background-color:#FFF;}
.btn_box{text-align:center; margin:10px 0px;}
.btn_box a{background:url(images/sprites.gif) no-repeat; width:55px; height:27px; display:inline-block; color:#FFF; line-height:27px; text-align:center;}.btn_box a:hover{text-decoration:none; color:#FFF;}
.sure{ background-position:0px 0px;}
.cancel{ background-position: -55px 0px;}
/*遮罩层*/
.mask{z-index:999;background-color:#000;position:absolute;top:0px; left:0px;filter:alpha(opacity=10);-moz-opacity:0.1;-khtml-opacity: 0.1;opacity: 0.1;}
.ifm{position:absolute; z-index:99;position:absolute;top:0px;left:0px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity:0;}
</style>
</head>
<body>
<input type="text" /><span style="color:#F00;">哈哈哈哈哈</span><input type="button" value="显示弹出层" id="show"/><select><option>我是下拉框</option></select>
<p style="height:2500px;"></p>
<iframe class="ifm"></iframe>
<div class="mask"></div>
<div class="popbox">
<p class="pop_tit"><a href="###" id="close">关闭</a>请输入邮政编码进行地区查询</p>
<div class="pop_content">我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦我是弹出的内容哦
</div>
<div class="btn_box">
<a href="###" class="sure">确 定</a>
<a href="###" class="cancel">取 消</a>
</div>
</div>
</body>
<script>
$(function(){
var windowHeight = document.documentElement.clientHeight;
var windowWidth = document.documentElement.clientWidth;
var htmlHeight = $(document).height();
var popupHeight = $(".popbox").height();
$(".popbox").css({
"top": windowHeight/2-popupHeight/2
});
$(".mask").css({
"height": htmlHeight,
"width": windowWidth
});
$(".ifm").css({
"height": htmlHeight*0.99,
"width": windowWidth*0.99
});
$(".popbox").hide();
$(".ifm").hide();
$(".mask").hide();
$("#show").click(function(){
$(".popbox").show();
$(".ifm").show();
$(".mask").show();
})
$("#close").click(function(){
$(".popbox").hide();
$(".ifm").hide();
$(".mask").hide();
})
/*拖动*/
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(".pop_tit").click(function(){
//alert("click");//点击（松开后触发）
}).mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($(".popbox").css("left"));
_y=e.pageY-parseInt($(".popbox").css("top"));
$(".popbox").fadeTo(20, 0.25);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$(".popbox").css({top:y,left:x});//控件新位置
}
}).mouseup(function(){
_move=false;
$(".popbox").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
})
</script>
</html>
