jQuery点击弹出窗口代码实例

弹出居中窗口这样的效果，大家应该不陌生，在大量的网站都有应用，比如点击弹出注册窗口或者登陆窗口，还有提示之类的功能都会用到弹出按钮效果，下面是一段弹出垂直水平居中窗口的代码实例。

代码如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>弹出居中窗口效果代码-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 type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#btn").click(function(){ 
    popCenterWindow(); 
  }) 
})
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(); 
} 
</script>
</head>
<body>
<div id="box">
<input type="button" value="弹出居中窗口" id="btn" />
</div>
<div class="window" id="center">
  <div id="title" class="title"><img src="mytest/jQuery/close.jpg" alt="关闭" />51前端欢迎您</div>
  <div class="content">每天都是新的，好好珍惜！</div>
</div>
</body>
</html>

代码描述：jQuery点击弹出窗口。jQuery点击弹出窗口代码实例

下载全部收藏

145 193

用户评论

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