jquery弹出居中窗口效果代码实例

点击一个按钮弹出一个窗口效果在各种网站都有应用，本章节不单单介绍弹出居中窗口的效果，而且还有居左和居右效果，下面先看代码实例:

[ jQuery ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.51qianduan.com/" />
<head>
<title>jquery实现的弹出窗口效果-51前端</title> 
<style type="text/css"> 
.window{ 
  width:250px; 
  background-color:#d0def0; 
  position:absolute; 
  padding:2px; 
  margin:5px; 
  display:none; 
} 
.content{ 
  height:150px; 
  background-color:#FFF; 
  font-size:14px; 
  overflow:auto; 
} 
.title{ 
  padding:2px; 
  color:#0CF; 
  font-size:14px; 
} 
.title img{ 
  float:right; 
} 
</style> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function (){ 
  $("#btn_center").click(function (){ 
    popCenterWindow(); 
  })
  $("#btn_right").click(function (){ 
    popRightWindow(); 
  }) 
  $("#btn_left").click(function (){ 
    popLeftWindow(); 
  })
})
var windowHeight; 
var windowWidth; 
var popWidth; 
var popHeight; 
function init(){ 
  windowHeight=$(window).height(); 
  windowWidth=$(window).width(); 
  popHeight=$(".window").height(); 
  popWidth=$(".window").width(); 
}
function closeWindow(){ 
  $(".title img").click(function(){ 
    $(this).parent().parent().hide("slow"); 
  })
}
function popCenterWindow(){ 
  init(); 
  var popY=(windowHeight-popHeight)/2; 
  var popX=(windowWidth-popWidth)/2; 
  $("#center").css("top",popY).css("left",popX).slideToggle("slow"); 
  closeWindow(); 
} 
function popLeftWindow(){ 
  init(); 
  var popY=windowHeight-popHeight; 
  $("#left").css("top",popY-50).css("left",50).slideToggle("slow"); 
  closeWindow(); 
} 
function popRightWindow(){ 
  init(); 
  var popY=windowHeight-popHeight; 
  var popX=windowWidth-popWidth; 
  $("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow"); 
  closeWindow(); 
}
</script> 
</head> 
<body> 
<div> 
  <input type="button" value="居中窗口" id="btn_center" /> 
  <input type="button" value="居左下角" id="btn_left" /> 
  <input type="button" value="居右下角" id="btn_right" /> 
</div> 
<div class="window" id="center"> 
  <div id="title" class="title">
     <img src="mytest/jQuery/close.jpg" alt="关闭" />居中窗口
  </div> 
  <div class="content">51前端</div> 
</div>
<div class="window" id="left"> 
  <div id="title2" class="title">
    <img src="mytest/jQuery/close.jpg" alt="关闭" />居左窗口
  </div> 
  <div class="content">51前端</div> 
</div> 
<div class="window" id="right"> 
  <div id="title3" class="title">
    <img src="mytest/jQuery/close.jpg" alt="关闭" />居右窗口
  </div> 
  <div class="content">51前端</div> 
</div> 
</body> 
</html>

代码描述：jquery弹出居中窗口。jquery弹出居中窗口效果代码实例

下载全部收藏

114 152

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册