简单弹框

最新推荐文章于 2025-03-22 10:31:13 发布

最新推荐文章于 2025-03-22 10:31:13 发布 · 139 阅读

文章标签：

#jquery #ViewUI

jquery 专栏收录该内容

41 篇文章

订阅专栏

<!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" onclick="closePop()" onmouseenter="this.style.backgroundPosition = '0 -19px'" onmouseout="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" onclick="closePop()" onmouseenter="this.style.backgroundPosition = '0 -21px'" onmouseout="this.style.backgroundPosition = '0 0'">取消</div>
   <div id="obtn" onclick="confirmPop()" onmouseenter="this.style.backgroundPosition = '0 -21px'" onmouseout="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>