jQuery怎么实现弹出窗口弹出div层

这篇文章主要介绍了jQuery怎么实现弹出窗口弹出div层的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇jQuery怎么实现弹出窗口弹出div层文章都会有所收获，下面我们一起来看看吧。

jQuery代码：

$(function(){ 　　var screenwidth,screenheight,mytop,getPosLeft,getPosTop 　　screenwidth = $(window).width(); 　　screenheight = $(window).height(); 　　//获取滚动条距顶部的偏移 　　mytop = $(document).scrollTop(); 　　//计算弹出层的left 　　getPosLeft = screenwidth/2 - 260; 　　//计算弹出层的top 　　getPosTop = screenheight/2 - 150; 　　//css定位弹出层 　　$("#box").css({"left":getPosLeft,"top":getPosTop}); 　　//当浏览器窗口大小改变时... 　　$(window).resize(function(){ 　　  screenwidth = $(window).width(); 　　  screenheight = $(window).height(); 　　  mytop = $(document).scrollTop(); 　　  getPosLeft = screenwidth/2 - 260; 　　  getPosTop = screenheight/2 - 150; 　　  $("#box").css({"left":getPosLeft,"top":getPosTop+mytop}); 　　}); 　　//当拉动滚动条时... 　　$(window).scroll(function(){ 　　  screenwidth = $(window).width(); 　　  screenheight = $(window).height(); 　　  mytop = $(document).scrollTop(); 　　  getPosLeft = screenwidth/2 - 260; 　　  getPosTop = screenheight/2 - 150; 　　  $("#box").css({"left":getPosLeft,"top":getPosTop+mytop}); 　　}); 　　//点击链接弹出窗口 　　$("#popup").click(function(){ 　　  $("#box").fadeIn("fast"); 　　  //获取页面文档的高度 　　  var docheight = $(document).height(); 　　  //追加一个层，使背景变灰 　　  $("body").append("
"); 　　  $("#greybackground").css({"opacity":"0.5","height":docheight}); 　　  return false; 　　}); 　　//点击关闭按钮 　　$("#closeBtn").click(function() { 　　  $("#box").hide(); 　　  //删除变灰的层 　　  $("#greybackground").remove(); 　　  return false; 　　}); });

html代码：

         　
 　　点击弹出div窗口 　
 　
 　 关闭 　
  

关于"jQuery怎么实现弹出窗口弹出div层"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"jQuery怎么实现弹出窗口弹出div层"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。