当前位置：首页 > news >正文

jQuery 弹出窗口的形式一直是具体案件的中心

news 来源：原创 2024/5/6 2:04:19

在网上查多不是不符合无效;因此，一些自己总结,解决这个问题

原则:

常见问题:

弹出层居中了,背景也是半透明的

可是发现一拉动滚动栏立即就露馅了发现背景仅仅设置了屏幕所在段,其它部分都是原来的样子,并且弹出层由于滚动栏移动不见了这是网上大部分弹出层出现的普遍问题

问题解决的方法,有三种

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

详细说明看这个链接

javascript鼠标滚轮滚动事件

可是这种方法用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>