`
keimon
  • 浏览: 73048 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

简单弹框

jquery 
阅读更多


 

<!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>

  • 大小: 6 KB
0
顶
2
踩
分享到：
| 仿天猫图片展示效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics