#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");

}

另,附加上去有些资料

 
(document).height()与$(window).height()的区别
 

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()的区别的更多相关文章

  1. js实现第一次打开网页弹出指定窗口(常用功能封装很好用)

    js实现第一次打开网页弹出指定窗口(常用功能封装很好用) 一.总结 1.常用功能封装:之前封装的cookie的操作函数非常好用,我自己也可以这么搞 二.js实现第一次打开网页弹出指定窗口 练习1:第一 ...

  2. android在桌面弹出一个窗口

    android在桌面弹出一个窗口 遇到了这种需求,要和iPhone一样的效果. 下面是简单实现功能,优化和美化部分,有时间慢慢搞. 方法应该有不少吧,我用的是弹出一个activity,将这个activ ...

  3. 如何在 QWidget 窗口上弹出右键菜单

    Title : QWidget 窗口上弹出右键菜单的两个方法 Solution 1 : 给一个 QWidget 添加 QActions,设置 QWidget 的 contextMenuPolicy 属 ...

  4. JS设置弹出小窗口。

    经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这 ...

  5. 创建一个弹出DIV窗口

    创建一个弹出DIV窗口 摘自:   http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...

  6. QUI操作超时弹出登录窗口登录的处理方式

    在使用QUI开发的业务系统中,如果长时间没操作,session过期后,再次操作系统超时会自动跳转到登陆页面,如果当前有一些操作没有保存,需要重新登录后再次填写信息,用户体验很不好! 为了避免超时后页面 ...

  7. ZH奶酪:Ionic中(弹出式窗口)的$ionicModal使用方法

    Ionic中[弹出式窗口]有两种(如下图所示),$ionicModal和$ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用Ja ...

  8. javascript--自定义弹出登陆窗口(弹出窗)

    web开发中浏览器对象封装了诸如prompt.alert.confirm等弹出框,但是有的弹出框并不能满足开发需要,需要我们自己定义弹出框,诸如用户登陆框.消息提示框等.本文利用弹出用户登陆框示例,对 ...

  9. pyqt5对用qt designer设计的窗体实现弹出子窗口的示例

    pyqt5对用qt designer设计的窗体实现弹出子窗口的示例 脚本专栏 python 1. 用qt designer编写主窗体,窗体类型是MainWindow,空白窗口上一个按钮.并转换成mai ...

随机推荐

  1. 查看.a架构文件

    苹果公司现在要求所有新提交的评论app,我们必须支持64位架构.而我们的在线项目编制,操作员做了一堆SDK在需要访问,我们发现,在这个过程中,有些SDK的.a文件进入后,链接错误,如提示 Undefi ...

  2. ZOJ 1203 Swordfish 旗鱼 最小生成树,Kruskal算法

    主题链接:problemId=203" target="_blank">ZOJ 1203 Swordfish 旗鱼 Swordfish Time Limit: 2 ...

  3. Alamofire网络库进阶教程

    本章节由CocoaChina翻译组成员星夜暮晨(博客)翻译自raywenderlich:Intermediate Alamofire Tutorial,敬请勘误. 欢迎回到我们的 Alamofire ...

  4. SQLSERVER手动增长日志文件和数据文件

    原文:SQLSERVER手动增长日志文件和数据文件 SQLSERVER手动增长日志文件和数据文件 手动增长日志文件,实际上就是修改日志文件的大小  size 的单位是MB 下面设置日志文件大小是204 ...

  5. JAVA Socket传输Object(对象)注意的问题

    在java中,可以通过socket将一个对象进行传递,通过ObjectOutputStream,ObjectInputStream来进行写入和读取(具体的方法参考http://blog.csdn.ne ...

  6. 如何使用 iOS 7 的 AVSpeechSynthesizer 国家有声读物(4)

    控制:我们一定要学会控制 尤达大师(电影<星球大战>)有话:的关键在于控制.这本故事书是一个字一个字读出来,我愿意为它添加两个button,音调和语速,以便我们能够调整语音合成实时的时候. ...

  7. 你所不了解的float(滥用float的怪异现象) (转)

    阅读目录 float设计初衷就是为了实现文字环绕效果 如何解决浮动造成的父容器塌陷? 兼容各浏览器清除浮动的通用方式 滥用浮动 运用浮动的一些特性 浮动与布局 浮动与单侧固定布局 浮动与智能自适应的流 ...

  8. 依据Uri获得sd卡图片

    <pre name="code" class="java">String mBigImage = URLEncoder.encode(mImageU ...

  9. CCFadeOut ,CCFadeIn 不能使用的原因

    CCFadeOut *action = CCFadeOut::create(0.5f);  image->runAction(action); 截取部分代码.以上是我写游戏时候遇到的问题代码, ...

  10. Linux内核进程管理

    介绍: 在Linux的内核的五大组成模块中,进程管理模块时很重要的一部分.它尽管不像内存管理.虚拟文件系统等模块那样复杂.也不像进程间通信模块那样条理化,但作为五大内核模块之中的一个,进程管理对我们理 ...