<!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=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
position:relative;
}
#pop_up{
width:100%;
position:absolute;
}
#pop_head{
height:30px;
}
#tl,#tc,#tr,#bl,#bc,#br{
position:absolute;
background-image:url(d_bg.gif);
background-color:#ccc;
}
#tl, #tc, #tr{
height:30px;
}
#tl{
background-repeat:no-repeat;
background-position:0 0;
width:5px;
}
#tc{
background-position:0 -30px;
background-repeat:repeat-x;
left:5px;
right:5px;
width:auto;
}
#tr{
background-position:0 -60px;
background-repeat:no-repeat;
width:5px;
right:0;
}
#bl,#bc,#br{
height:32px;
}
#bl{
background-repeat:no-repeat;
background-position:0 -90px;
width:5px;
}
#bc{
background-repeat:repeat-x;
background-position:0 -122px;
left:5px;
right:5px;
width:auto;
}
#br{
background-repeat:no-repeat;
background-position:0 -154px;
right:0;
width:5px;
}
#pop_content{
border-left: 1px solid #005195;
border-right:1px solid #005195;
}
#tc span{
padding-left:12px;
line-height:30px;
}
#main_content{
padding-left:12px;
padding-right:12px;
padding-top:6px;
padding-bottom:6px;
}
#pop_foot{
position:relative;
}
#xbtn{
position:absolute;
background: url(cbtn.gif) no-repeat;
background-position:0 0;
right:20px;
width:43px;
height:19px;
cursor:pointer;
}
#cbtn,#obtn{
background:url(obtn.gif) no-repeat;
width:60px;
height:21px;
position:absolute;
text-align:center;
line-height:22px;
font-size:12px;
cursor:pointer;
}
#cbtn{
right:90px;
top:6px;
}
#obtn{
right:20px;
top:6px;
}
</style>
</head>
<body>
<input type="button" value="button" id="btn" />
<div id="div1" style="display:none">
<div id="pop_up">
<div id="pop_head">
<div id="tl"></div>
<div id="tc"><span>pop_up_head</span></div>
<div id="tr"></div>
<div id="xbtn" οnclick="closePop()" οnmοuseenter="this.style.backgroundPosition = '0 -19px'" οnmοuseοut="this.style.backgroundPosition = '0 0'"></div>
</div>
<div id="pop_content" style="height:238px">
<div id="main_content">pop_up_content</div>
</div>
<div id="pop_foot">
<div id="bl"></div>
<div id="bc"></div>
<div id="br"></div>
<div id="cbtn" οnclick="closePop()" οnmοuseenter="this.style.backgroundPosition = '0 -21px'" οnmοuseοut="this.style.backgroundPosition = '0 0'">取消</div>
<div id="obtn" οnclick="confirmPop()" οnmοuseenter="this.style.backgroundPosition = '0 -21px'" οnmοuseοut="this.style.backgroundPosition = '0 0'">确定</div>
</div>
</div>
</div>
<div id="test"></div>
</body>
<script type="text/javascript">
/*
* 简单弹框,ie8,ff,opera中测试可用,其余浏览器未测;
*****made by keimon*****
*******2013-01-09******
*/
$('#btn').click(function(){
var maskObj = document.createElement('div');
maskObjStyle = {
width:'100%',
height:'100%',
backgroundColor: '#000',
opacity:'0.1',
zIndex:998,
position:'fixed',
top:0,
left:0
}
$(maskObj).css(maskObjStyle);
$(maskObj).attr('id','maskId')
$('body').append(maskObj);
var popObj = document.createElement('div');
popObjStyle = {
width:'400px',
height:'300px',
position:'fixed',
backgroundColor:'#fff',
border:'1px solid #999',
marginLeft:'-200px', //弹框宽度的一半;
marginTop:'-150px', //弹框高度的一半
left:'50%',
top:'50%',
zIndex:999
}
$(popObj).css(popObjStyle);
$(popObj).attr('id','popId');
$(popObj).html($('#div1').html())
$('body').append(popObj);
})
function closePop(){
$('#maskId').remove();
$('#popId').remove();
}
function confirmPop(){
closePop();
//点击确定按钮以后发生的事件;
$('#test').html($('#tc').html())
}
</script>
</html>