滚动居中效果_带遮罩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> * { margin:0; padding:0 } h3 { background:gray; text-align:center; line-height:100px; } .main { height:9000px; width:30px; background: orange; margin-left:90%; } .main a { padding:10px; } #tip { border:50px solid red; padding:100px; width:260px; height:100px; background:orange; position:fixed; } </style> </head> <body> <!-- 浮层页面代码 s --> <style type="text/css"> .float_layer_box_warp{ width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:1003;} .float_layer_box_bg{ width:100%; height:100%; position:absolute; background:#000;filter:alpha(opacity=60);opacity:0.6;z-index:1000;} .float_layer_box_iframe{ width:100%; height:100%; position:absolute; filter:alpha(opacity=0);opacity:0} </style> <div class="float_layer_box_warp" id="alert_float_layer" style="display:none;"> <div class="float_layer_box_bg"></div> <!--如果一个绝对定位的元素在上一个定位的元素内，必须设置left,top 所以在知道left/top的情况下，我们尽可能的都设置它--> <iframe class="float_layer_box_iframe" frameborder="0"></iframe> </div> <!-- 浮层页面代码 e --> <h3>弹出层居中(注意：ie6下如果元素过高，透明滤镜会失效,ie6不得不说是一个奇葩呀…………)</h3> <div id="tip" style="display:none;"> border:50px solid red; padding:100px;<br /> <button onclick="openMask();">打开遮罩</button> <button onclick="closeMask();">关闭遮罩</button> <br /> <span id="msg"></span> </div> <div class="main"> <?php for($i=0;$i<501;$i++) { $style = ''; if($i%100 == 0) { $style = 'style="background:#F00; margin-left:30px;"'; } echo '<a id="anchor_'.$i.'" '.$style.' href="javascript:void(0);" onclick="showmsg(\'tip\', '.$i.')">'.$i.'</a>'; echo "<br/>"; } ?> </div> </body> </html> <script> //浏览器类型检测 var FBrowser=(function(){ var ua = navigator.userAgent; var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]'; return { isIE: !!window.attachEvent && !isOpera, isOpera: isOpera, isSafari: ua.indexOf('AppleWebKit/') > -1, isFirefox: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1, MobileSafari: /Apple.*Mobile.*Safari/.test(ua), isChrome: !!window.chrome }; })(); FBrowser.isIE6=FBrowser.isIE&&!window.XMLHttpRequest; FBrowser.isIE7=FBrowser.isIE&&!!window.XMLHttpRequest; function Fid(id) { return document.getElementById(id); } //ie6下滚动定位 function scrollHandler(id) { Fid(id).style.top = document.documentElement.scrollTop+document.documentElement.clientHeight/2+"px"; } //获取页面的大小 function FgetPageSize() { if (FBrowser.isIE6) return { width : document.body.scrollWidth, height : document.body.scrollHeight }; if (document.documentElement) return { width : document.documentElement.scrollWidth, height : document.documentElement.scrollHeight }; else return { width : document.body.scrollWidth, height : document.body.scrollHeight }; } //获取窗口的大小 function FgetWindowSize() { if (FBrowser.isIE6 || FBrowser.isOpera) return { width : document.body.clientWidth, height : document.documentElement.clientHeight || document.body.clientHeight || 0 }; else return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight }; } //计算遮罩的尺寸 function setMaskSize() { var cur_size_arr = FgetPageSize(); var tmp_size_arr = FgetWindowSize(); //当元素的高度不及浏览器高度时 if (cur_size_arr['height'] < tmp_size_arr['height']) { cur_size_arr['height'] = tmp_size_arr['height']; } Fid('alert_float_layer').style.width = cur_size_arr['width'] + "px"; Fid('alert_float_layer').style.height = cur_size_arr['height'] + "px"; } //打开遮罩 function openMask(callback) { //设置mask的尺寸，以及位置 setMaskSize(); Fid('alert_float_layer').style.display = "block"; if (typeof callback == "function") { callback(); } //非IE浏览器下 if (document.addEventListener) { window.addEventListener("load", setMaskSize, true); window.addEventListener("resize", setMaskSize, true); window.addEventListener("scroll", setMaskSize, true); }; //ie if (FBrowser.isIE) { window.attachEvent("onload", setMaskSize); window.attachEvent("onresize", setMaskSize); window.attachEvent("onscroll", setMaskSize); }; } //关闭遮罩 function closeMask(callback) { Fid('alert_float_layer').style.display="none"; if(typeof callback=='function') { callback(); } } //居中的弹出层 function showmsg(id, msg) { if(Fid(id)) { msg = msg ? msg : ''; if(msg) { Fid('msg').innerHTML = msg; } Fid(id).style.left='50%'; Fid(id).style.display="block"; Fid(id).style.zIndex = "2000"; if(FBrowser.isIE6){ //clientHeight元素的可视区域大小 scrollHandler(id); Fid(id).style.position = 'absolute'; }else{ Fid(id).style.top='50%'; Fid(id).style.position = 'fixed'; } var width = Fid(id).offsetWidth; var height = Fid(id).offsetHeight; Fid(id).style.marginLeft = -width/2+'px'; Fid(id).style.marginTop = -height/2+'px'; if(FBrowser.isIE6){ //window.attachEvent("onload",sd_SIPRivalposHeader); //window.attachEvent("onresize",sd_SIPRivalposHeader); window.attachEvent("onscroll",function(){ scrollHandler(id); }); }; } } </script>
效果图：
