网页上弹出pop窗口实例,(document).height()与$(window).height()的区别
#dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none;
width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
#dvpop{position:absolute;display:none;width:auto; height:auto; z-index:100;
background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
以下是在需要弹框的页面上放置的弹框div,是内置在弹框父页面的:
<div id="dvbg"></div>
<div id="dvpop">
<table>弹出框内容在这里</table>
</div>
</div>
需要弹出框显示时,用以下代码:
$("#dvbg").css({ display: "block", height: $(document).height() });
setDivCenter("#dvpop");
//让指定的DIV始终显示在屏幕正中间
function setDivCenter(divName) {
var top = ($(window).height() - $(divName).height()) / 2;
var left = ($(window).width() - $(divName).width()) / 2;
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
alert($(document).height());
$(divName).css({ position: 'absolute', top: top + scrollTop, left: left + scrollLeft }).show();
}
关闭pop窗口时,使用以下代码:
function close()
{
$("#dvbg").css("display", "none");
$("#dvpop").css("display", "none");
}
另,附加上去有些资料
jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用.
注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变,但是jQuery(document).height()是不变的。
$(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离 要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了 要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了 $(document).height() //是获取整个页面的高度
$(window).height() //是获取当前 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的 根据英文应该也能理解吧 自己做个实验就知道了
$(document).scroll(function(){
$("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->
网页上弹出pop窗口实例,(document).height()与$(window).height()的区别的更多相关文章
- js实现第一次打开网页弹出指定窗口(常用功能封装很好用)
js实现第一次打开网页弹出指定窗口(常用功能封装很好用) 一.总结 1.常用功能封装:之前封装的cookie的操作函数非常好用,我自己也可以这么搞 二.js实现第一次打开网页弹出指定窗口 练习1:第一 ...
- android在桌面弹出一个窗口
android在桌面弹出一个窗口 遇到了这种需求,要和iPhone一样的效果. 下面是简单实现功能,优化和美化部分,有时间慢慢搞. 方法应该有不少吧,我用的是弹出一个activity,将这个activ ...
- 如何在 QWidget 窗口上弹出右键菜单
Title : QWidget 窗口上弹出右键菜单的两个方法 Solution 1 : 给一个 QWidget 添加 QActions,设置 QWidget 的 contextMenuPolicy 属 ...
- JS设置弹出小窗口。
经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这 ...
- 创建一个弹出DIV窗口
创建一个弹出DIV窗口 摘自: http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...
- QUI操作超时弹出登录窗口登录的处理方式
在使用QUI开发的业务系统中,如果长时间没操作,session过期后,再次操作系统超时会自动跳转到登陆页面,如果当前有一些操作没有保存,需要重新登录后再次填写信息,用户体验很不好! 为了避免超时后页面 ...
- ZH奶酪:Ionic中(弹出式窗口)的$ionicModal使用方法
Ionic中[弹出式窗口]有两种(如下图所示),$ionicModal和$ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用Ja ...
- javascript--自定义弹出登陆窗口(弹出窗)
web开发中浏览器对象封装了诸如prompt.alert.confirm等弹出框,但是有的弹出框并不能满足开发需要,需要我们自己定义弹出框,诸如用户登陆框.消息提示框等.本文利用弹出用户登陆框示例,对 ...
- pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例 脚本专栏 python 1. 用qt designer编写主窗体,窗体类型是MainWindow,空白窗口上一个按钮.并转换成mai ...
随机推荐
- SQL server 2005 PIVOT运算符的使用
原文:SQL server 2005 PIVOT运算符的使用 PIVOT,UNPIVOT运算符是SQL server 2005支持的新功能之一,主要用来实现行到列的转换.本文主要介绍PIVOT运算符的 ...
- Effective C++ 条款44
本节条款的标题是:将与參数无关的代码抽离templates 学习本节条款首先须要明确一件事情,那就是模板实例化的过程会不会反复? 我们来举个样例: #include<iostream> u ...
- MAC 10.10 apache 服务器配置
mac中自带了apache服务器, 如果需要在mac上使用apache服务器, 只需要配置并启动服务器即可. mac 10.10 中自带的apache版本是 2.4 mac 10.9 中自带的apac ...
- 最短路径:Dijkstra,Bellman,SPFA,Floyd该算法的实施
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQ4NzA1MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- IE6浏览器的一些问题
背景图像缓存 // IE6 background image caching fix. try { document.execCommand("BackgroundImageCache&qu ...
- 又一次认识HTML,CSS,Javascript 之node-webkit 初探
今天我们来系统的.全面的 了解一下前端的一些技术,将有助于我们写出 更优秀的 产品 出来. 什么是HTML? HTML 是用来描写叙述网页的一种语言. HTML 包括一些根节点.子节点,文本节点.属性 ...
- poj 2762 Going from u to v or from v to u? (推断它是否是一个薄弱环节图)
意甲冠军:给定一个有向图有m单向边缘.免费推断是否两点起来(a可以b要么b可以a或最多彼此),该请求 弱联通重量. 算法: 缩点求强连通分量.然后又一次建图.推断新图是否是一条单链,即不能分叉,假设分 ...
- JBoss配置解决高并发连接异常问题(转)
这两天一个项目在做压力测试的时候,发现只要并发数超过250个,连续测试两轮就会有连接异常出现,测试轮数越多出现越频繁,异常日志如下: Caused by: com.caucho.hessian.cli ...
- DNA和纳米(Nano)Fusion技术的发展趋势
细观国内外有关DNA与Nano技术的报道.不得不承认存在不小的差距,并且差距有继续拉大的趋势. 在我们国内,DNA技术是作为遗产基因来对待的.引用的有关中文參考资料一般比較陈旧.缺少參考价值.在发达国 ...
- 一天JavaScript示例-判定web页面的区域
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...