<DIV id="closeLayer" onClick="closeMe()"><IMG src="jiuye/close.gif" width="15" height="13"></DIV> <div id ="jiuye"><img src="jiuye/jiuye1.jpg" id="jiuyeImage" onclick="javascript:location='http://www.qk12333.com'" style="cursor:hand"/></div> <style type="text/css"> #jiuye{ position:absolute; left:16px; top:129px; width:600px; height:540px; z-index:1; } #closeLayer{ position:absolute; left:580px; top:143px; width:24px; height:19px; z-index:2; } </style> <script src="jiuye/jquery-1.8.0.js" type="text/javascript"></script> <script type="text/javascript"> function closeMe(){ document.getElementById("closeLayer").style.display="none"; document.getElementById("jiuye").style.display="none"; $(window).unbind(); } // 居中 function center() { var obj=$("#jiuye"); var closeObj=$("#closeLayer"); var screenWidth = $(window).width(), screenHeight = $(window).height(); //当前浏览器窗口的 宽高 var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度 var objLeft = (screenWidth - obj.width())/2 ; var objTop = (screenHeight - obj.height())/2 + scrolltop; obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); var closeObjLeft = (screenWidth + obj.width())/2-closeObj.width()-2 ; var closeObjTop = (screenHeight - obj.height())/2 + scrolltop+12; closeObj.css({left: closeObjLeft + 'px', top: closeObjTop + 'px','display': 'block'}); //浏览器窗口大小改变时 $(window).resize(function() { screenWidth = $(window).width(); screenHeight = $(window).height(); scrolltop = $(document).scrollTop(); objLeft = (screenWidth - obj.width())/2 ; objTop = (screenHeight - obj.height())/2 + scrolltop; obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); var closeObjLeft = (screenWidth + obj.width())/2-closeObj.width()-2 ; var closeObjTop = (screenHeight - obj.height())/2 + scrolltop+12; closeObj.css({left: closeObjLeft + 'px', top: closeObjTop + 'px','display': 'block'}); }); //浏览器有滚动条时的操作、 $(window).scroll(function() { screenWidth = $(window).width(); screenHeight = $(window).height(); scrolltop = $(document).scrollTop(); objLeft = (screenWidth - obj.width())/2 ; objTop = (screenHeight - obj.height())/2 + scrolltop; obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); var closeObjLeft = (screenWidth + obj.width())/2-closeObj.width()-2 ; var closeObjTop = (screenHeight - obj.height())/2 + scrolltop+12; closeObj.css({left: closeObjLeft + 'px', top: closeObjTop + 'px','display': 'block'}); }); } center(); $('#closeLayer').show(300).delay(3000).fadeOut("slow"); $('#jiuye').show(300).delay(3000).fadeOut("slow",function(){ //隐藏时把元素删除 $(window).unbind(); }); </script>
相关推荐
Jquery弹出div层窗口以及div屏幕居中, 背景滤镜效果, div拖拽效果 在IE和FireFox测试通过!
在页面加载后或者点击页面的某个链接时弹出一个div层,同时页面的其他地方会变灰
jquery.magnific-popup.js 弹出Div模式窗口
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要<div id="ok">这里是弹出浮动遮罩层</...
完美弹出div窗口 修改版 完美遮罩 修复JQuery对浏览器判断的bug 支持IE6,7,8,FF jspanduanIE.html test无边框iframe完美遮罩.html demo.html 多种测试页面
JQUERY弹出模式DIV 采用JQEURY_CSS
NULL 博文链接:https://ollevere.iteye.com/blog/1731454
jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果
JQUery弹出div层窗口,附带jquery的js文件,可以直接运行
jquery 插件 弹出模式窗口 比较实用,可以用于用户登录而在同一页面弹出,模式窗口。登陆完再自动关闭模式窗口
jquery简洁方便的弹出窗口效果(支持滚动条、左右切换、关闭功能).rarjquery简洁方便的弹出窗口效果(支持滚动条、左右切换、关闭功能).rarjquery简洁方便的弹出窗口效果(支持滚动条、左右切换、关闭功能).rarjquery...
jquery弹出窗口
jQuery超炫淡入淡出效果DIV渐变居中弹出框插件
jquery js div 弹出
jquery div 弹出框 jquery div 弹出框 jquery div 弹出框 jquery div 弹出框
jQuery实现将div的滚动条滚动到指定位置 jQuery实现将div的滚动条滚动到指定位置
jquery弹出效果实例,展示了jquery对弹出窗口的多个实例,弹出窗口框,弹出框内弹出页面,
JQuery弹出窗口实例源码
jquery点击按钮显示广告5秒自动消失
jquery弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间