在网上查 多 不是不符合无效;因此，一些自己总结,解决这个问题
 
原则:
常见问题:
弹出层居中了,背景也是半透明的 
可是发现一拉动滚动栏立即就露馅了发现背景仅仅设置了屏幕所在段,其它部分都是原来的样子,并且弹出层由于滚动栏移动不见了 这是网上大部分弹出层出现的普遍问题
问题解决的方法,有三种
1.利用IE6的漏洞,_top和使用css expresstion表达式
长处:不会抖动,通过计算得出位置,大部分浏览器都能够使用
缺点:不推荐使用css expresstion由于在做不论什么事件时css expression都会调用js方法又一次计算结果,随便都有1000次/秒,当页面元素非常多渲染效果就非常非常差
背景层,弹出层的样式将 position:fixed;

改成

position:fixed!important;/* FF IE7*/

position:absolute;/*IE6*/

_top: expression(eval(document.compatMode &&

            document.compatMode=='CSS1Compat') ?

            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/

            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

2.js方法又一次计算位置

$(function(){

$(window).scroll(function(){

  //浏览器滚动栏失效;

  //$(window).scrollTop(0);

  var offset = $(window).offset();

  var position = $(window).position();

$("#div_pop").css("top",$(window).scrollTop()+$(window).outerHeight()/3);

   //滚动栏移动的高度+浏览器高度(计算外框)的三分之中的一个

$("#div_back").css("height",

 $(window).scrollTop()+$(window).outerHeight()); })  //背景层的大小高度,滚动栏移动的高度+浏览器高度(计算外框)
长处
攻克了css expression的大量元素渲染慢的问题
缺点
chrome没有问题,IE中会抖动由于移动滚动栏时计算高度,延时导致弹窗抖动(效果十分不友好)
3.固定滚动栏  让弹出层一直居中
利用滚动栏事件固定滚动栏一直为0
$(function(){

$(window).scroll(function(){

  //浏览器滚动栏失效;

  //$(window).scrollTop(0);

})
长处:jQuery的scroll方法兼容大部分浏览器重要的是同一时候屏蔽onkeypress上下导致的滚动栏移动
再讲讲js的锁定滚动栏
能够參照
<script>

var firefox = navigator.userAgent.indexOf('Firefox') != -1;

function MouseWheel(e) {

///对img按下鼠标滚路，阻止视窗滚动

e = e || window.event;

if (e.stopPropagation) e.stopPropagation();

else e.cancelBubble = true;

if (e.preventDefault) e.preventDefault();

else e.returnValue = false;

//其它代码

}

window.onload = function () {

var img = document.getElementById('img');

firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) : (img.onmousewheel = MouseWheel);

}

</script><div style="height:100px"></div>

<img src="http://avatar.profile.csdn.net/C/5/A/1_px372265205.jpg" id="img" style="width:200px"/>

<div style="height:1000px"></div>
滚动栏事件
onmousewhell  IE
DOMMousescroll  FF
详细说明看这个链接

可是这种方法用onkeypress 上下键 就会失效假设想完好能够加上对上下键的监控

而以下的方法直接使用position:fixed相对于浏览器偏移攻克了上面的全部问题
可是注意以下3点:
1.<!DOCTYPE html>一定要写,设置浏览器对html的解析版本号 详细分析能够看解说这个的blog
2. 设置一个背景透明的图层
z-index:9998;  //图层设置
opacity:0.5;     //IE6的透明
filter: alpha(opacity=50); //IE6以上的透明
-moz-opacity: 0.5;           //firefox透明
3.设置一个弹出层
z-index:9999;  //图层设置
弹出层,背景层的position都要是fixed
3.点击button就显示,否则隐藏.
<!DOCTYPE html>

<html>

<head>

<title>jQuery弹出框</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

.div_back{

 display:none;

 position:fixed;

 z-index:9998;

 top:0;

 left:0;

 width: 100%;

 height: 100%;

 background-color:#666666;

 opacity:0.5;

 filter: alpha(opacity=50);

 -moz-opacity: 0.5;

 }

.div_pop{

 display:none;

 position:fixed;

 z-index:9999;

 background-color:#eafcd5;

 top:30%;

 left:42%;

 width:200px;

 height:80px;

 padding:2px;

 border-radius:10px;

 box-shadow: 0 0 10px #666;

 border:2px solid #666666;

 }

.div_info{

position:absolute;

padding:10px;

}

.div_info_font{

position:absolute;

width:120px;

left:80px;

top:20px;

}

.div_title{

font-size:20px;

padding:2px;

background-color:#978987;

}

.div_close{

position:absolute;

right:5px;

}

.div_img{

 height:40px;

 width:40px;

 left:20px;

 position:absolute;

}

</style>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script>

function fnClose(){

 $("#div_back").hide();

 $("#div_pop").hide();

}

function fnOpen(){

 $("#div_back").show();

 $("#div_pop").show();

}

</script>

</head>

<body>

<div id="div_back" class="div_back">

</div>

<div id="div_pop" class="div_pop" >

 <div id="div_title" class="div_title">提示:

 <a id="close" href="javascript:fnClose()" class="div_close">关闭</a>

 </div>

 <div id="div_info" class="div_info">

 <img src="image/load.gif" class="div_img"/><div class="div_info_font">正在载入中...</div></div>

</div>

<p align="center">

<input type="button" value="打开" onClick="fnOpen()"/>

</p>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

<h2>aaa</h2>

</body>

</html>

版权声明：本文博客原创文章，博客，未经同意，不得转载。

jQuery 弹出窗口的形式一直是具体案件的中心的更多相关文章

  1. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  2. jQuery弹出窗口浏览图片

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...

  3. Jquery弹出窗口

    今天讲了Jquery的弹出窗口的组成和用法: 先把引用文件的代码写好: // 每个弹窗的标识 var x =0; var idzt = new Array(); var Window = functi ...

  4. JQuery弹出窗口小插件ColorBox

    本文来自: Small_陌 http://www.cnblogs.com/wggmqj/archive/2011/11/04/2236263.html 今天在博客园看到一篇<ASP.NET MV ...

  5. FancyBox——jQuery弹出窗口插件

    最近工作项目中有用到这款插件,就查找了一下相关资料和用法,下面是一些基本的简单用法,比较容易掌握,有需要的小伙伴可以参考.:) FancyBox是一款基于jquery开发的类Lightbox插件.支持 ...

  6. jquery弹出窗口选择回写值

    $(document).ready(function(){ $('.sel').dblclick(function(){ var nowid=$(this).attr('id'); window.op ...

  7. jquery-通过js编写弹出窗口

    本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  8. EPUB弹出窗口式脚注

    网上搜到一些国学典籍的EPUB版,虽有古人的注解,但正文和注解混排在一起,当我只想迅速读正文的时候比较碍眼.于是研究了一下 EPUB3 中有关脚注(footnote)的规格定义,写了一个 Python ...

  9. jQuery弹出层始终垂直居中相对于屏幕或当前窗口

    把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...

随机推荐

  1. POJ 1258-Agri-Net (Kruskal)

    题目链接:Agri-Net 最小生成树水题,数组开的和题目描写叙述一样,可是就是RE,有填了个0,还好这个题用 库鲁斯卡尔 敲了一遍,发现了点问题,曾经写的库鲁卡尔模板有点问题,多写了步没用的操作,已 ...

  2. guava之Joiner 和 Splitter（转）

    最近在给客户准备一个Guava的分享,所以会陆续的更新关于Guava更多的细节分享.本文将记录Guava中得字符串处理Joiner(连接)和Splitter(分割)处理. Joiner 首先我们来看看 ...

  3. Android之一个简单计算器源代码

    通过Android4.0 网格布局GridLayout来实现一个简单的计算器界面布局   源码如下(欢迎大家指导 批评 ) package com.android.xiong.gridlayoutTe ...

  4. FORM验证简单demo

    详解稍后加入. 项目结构如图: web.xml <?xml version="1.0" encoding="UTF-8" ?> <web-ap ...

  5. 怎样使用 App Studio 高速定制你自己的 Universal Windows App

    今天之所以在写一篇关于 App Studio 的文章是由于,App Studio 经过了几次升级功能得到了明显提升还能够调用系统功能了.而且能够更方便的和应用商店关联公布 Universal Wind ...

  6. [置顶] 单键模式的C++描述

    设计模式-单键(Signelton):其实单键的设计模式说来很简单,说的直白一点就是程序运行过程中保证只有一个实例在运行而已.在软件系统中,经常有这样一些特殊的类,必须保证它们在系统中只存在一个实例, ...

  7. 【慎思堂】之JS牛腩总结

    一 JS基础 1-定义 Javascript是一种脚本语言/描述语言,是一种解释性语言.用于开发交互式web网页,使得网页和用户之间实现了一种实时性的.动态的.交互性的关系,使网页包含更多活跃的元素和 ...

  8. Windows 8 动手实验系列教程 实验6：设置和首选项

    动手实验 实验6:设置和首选项 2012年9月 简介 实验3介绍了合约并演示了应用程序如何轻松地与共享和搜索合约实现集成.合约同样包含设置超级按钮,它对活动的Windows应用商店应用的设置进行修改. ...

  9. linux命令行模式下实现代理上网（转）

    有些公司的局域网环境,例如我们公司的只允许使用代理上网,图形界面的很好解决就设置一下浏览器的代理就好了,但是linux纯命令行的界面就....下面简单几步就可以实现了! 一.命令行界面的一般代理设置方 ...

  10. 事务代码SE16N查看数表时可以使用命令激活编辑功能

    &sap_edit命令可以激活SE16N编辑功能,维护数据表,但是是除了主键不能维护外都可以修改