Shulou(Shulou.com)06/01 Report--

这篇文章主要介绍了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代码：

jquery pop up * {margin:0;padding:0;} #wrapper {height:1000px;} #box {display:none;position:absolute;width:520px;height:300px;border:#f60 solid 2px;z-index:200;background:#fff;} #closeBtn {position:absolute;right:10px;top:10px;cursor:pointer;} #greybackground {background:#000;display:block;z-index:100;width:100%;position:absolute;top:0;left:0;} 点击弹出div窗口 关闭 关于"jQuery怎么实现弹出窗口弹出div层"这篇文章的内容就介绍到这里，感谢各位的阅读!相信大家对"jQuery怎么实现弹出窗口弹出div层"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.