jQuery 快顯視窗一直置中詳細案例

標籤：javascript   jquery   

在網上查了 很多 不是不符合就是效果不好;於是自己總結一番,解決此問題 原理:常見問題:彈出層置中了,背景也是半透明的 但是發現一拉動捲軸馬上就露餡了發現背景只設定了螢幕所在段,其他部分都是原來的樣子,而且彈出層因為捲軸移動不見了 這是網上大部分彈出層出現的普遍問題問題解決辦法,有三種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的scorll方法相容大部分瀏覽器重要的是同時屏蔽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  IEDOMMousescroll  FF具體說明看這個連結

javascript滑鼠滾輪滾動事件

但是這個方法用onkeypress 上下鍵 就會失效如果想完善可以加上對上下鍵的監控而下面的方法直接使用position:fixed相對於瀏覽器位移解決了上面的所有問題但是注意下面3點:1.<!DOCTYPE html>一定要寫,設定瀏覽器對html的解析版本 具體分析可以看講解這個的blog2. 設定一個背景透明的圖層z-index:9998;  //圖層設定opacity:0.5;     //IE6的透明filter: alpha(opacity=50); //IE6以上的透明-moz-opacity: 0.5;           //firefox透明3.設定一個彈出層z-index:9998;  //圖層設定彈出層,背景層的position都要是fixed3.點擊按鈕就顯示,否則隱藏.

<!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 快顯視窗一直置中詳細案例