pop.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <style> *{ padding: 0; margin: 0; } .hide{ display: none; } .popWindow{ width: 300px; height: 300px; background: #abcdef; padding: 2px; margin: 10px; position: absolute; left: 0; top: 0; z-index: 2; } .popWindow h3{ height: 30px; line-height: 30px; } .popWindow h3 span{ float: right; font-size: 14px; font-weight: normal; cursor: pointer; } .popWindow h3 span:hover{ color: #f00; } .popWindow .content{ height: 270px; background: #fff; } .mask{ background: #000; opacity: 0.4; position: absolute; left: 0; top: 0; z-index: 1; } </style> </head> <body style="width:2000px"> <a href="javascript:;" id="show">显示窗口</a> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div class="popWindow hide"> <h3>弹出窗口的标题<span>关闭</span></h3> <div class="content">弹出窗口的内容</div> </div> <script src="jquery.js"></script> <script src="pop.js"></script> </body> </html>
pop.js
$(function(){ var oBtn = $('#show'); var popWindow = $('.popWindow'); var oClose = $('.popWindow h3 span'); //浏览器可视区域的宽度 var browserWidth = $(window).width(); //浏览器可视区域的高度 var browserHeight = $(window).height(); //浏览器纵向滚动条距离上边界的值 var browserScrollTop = $(window).scrollTop(); //浏览器横向滚动条距离左边界的值 var browserScrollLeft = $(window).scrollLeft(); //弹出窗口的宽度 var popWindowWidth = popWindow.outerWidth(true); //弹出窗口的高度 var popWindowHeight = popWindow.outerHeight(true); //left的值=浏览器可视区域的宽度/2-弹出窗口的宽度/2+浏览器横向滚动条距离左边界的值 var positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft; //top的值=浏览器可视区域的高度/2-弹出窗口的高度/2+浏览器纵向滚动条距离上边界的值 var positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop; var oMask = '<div class="mask"></div>' //遮照层的宽度 var maskWidth = $(document).width(); //遮照层的高度 var maskHeight = $(document).height(); oBtn.click(function(){ popWindow.show().animate({ 'left':positionLeft+'px', 'top':positionTop+'px' },500); $('body').append(oMask); $('.mask').width(maskWidth).height(maskHeight); }); $(window).resize(function(){ if(popWindow.is(':visible')){ browserWidth = $(window).width(); browserHeight = $(window).height(); positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft; positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop; popWindow.animate({ 'left':positionLeft+'px', 'top':positionTop+'px' },500); } }); $(window).scroll(function(){ if(popWindow.is(':visible')){ browserScrollTop = $(window).scrollTop(); browserScrollLeft = $(window).scrollLeft(); positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft; positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop; popWindow.animate({ 'left':positionLeft+'px', 'top':positionTop+'px' },500).dequeue(); } }); oClose.click(function(){ popWindow.hide(); $('.mask').remove(); }); });
效果图:
相关推荐
各种效果弹窗。美观实用。绝对满意,多达10几种。调用方便
jquery弹出效果实例,展示了jquery对弹出窗口的多个实例,弹出窗口框,弹出框内弹出页面,
lhgdialog是一功能强大的简单迷你并且高效的弹出窗口组件。 专为大型弹出窗口定制 相对于网上其它弹出窗口组件主要功能是提示信息来说,本组件主要是用来制作窗口中内容较多,页面比较复杂的窗口。本组件的窗口...
jquery点击弹出窗口特效
jquery实现弹出窗口,兼容性比较强。
这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html,十分灵活。另外最重要的一个特点是,它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果,挺酷的...
jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件...
jquery简单的点击按钮弹出窗口动画效果 jquery简单的点击按钮弹出窗口动画效果
jQuery实现弹出窗口中切换登录与注册表单
TipsWindown 支持拖拽的jQuery弹出窗口 TipsWindown 支持拖拽的jQuery弹出窗口
flavr是一个时尚的扁平弹出对话框为您的下一个网站。 flavr是响应设计布局,能够适应任何屏幕大小。 得到最好的用户体验,使用流行的animate.css动画,最重要的是,flavr可以运行在任何新的浏览器IE8(+),任何设备和...
这是一款jQuery实现的可以使用鼠标进行互动的3D弹出窗口插件,点击按钮弹出3D对话框窗口网页特效。
jquery点击弹出登陆窗口,亲测好用。
实现效果: jQuery模式弹出确认窗口,有好几种弹出窗口的样式,很不错的效果,php中文网推荐下载!
诸如CSDN,新浪博客,搜狐博客,百度空间的信息资讯弹窗,效果还不错。喜欢的可以下来研究使用,如果您有更多的意见,可以发送至我的邮箱地址(jxz_211@163.com)以便将它更加完善。
JavaScript仿百度弹出窗口对话框效果
lhgdialog是一功能强大的简单迷你并且高效的弹出窗口组件,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。 版本(2011-07-04 发布): V3.5.2 窗口lhgdialog.min.js文件的url...
一个类似百度登录弹出窗口带背景遮罩效果的jQuery弹出层代码,点击弹出登录窗口代码后,可以用鼠标拖动该窗口,右上角关闭。
http://www.jq22.com/demo/uiAlertView201712071705/# 此源代码存在bug,嵌套弹出框时,后面的弹出将无效。 此版本我已修正过,在项目中正常使用。 这里上传的代码含js,css及使用demo。 感谢原作者!