2009年8月21日 星期五

CSS & Jquery 黑幕遮罩

CSS
<div id="fullBg" style="display:none;position:absolute; left:0px; top:0px; font-size:0px; width:100%; height:100%; background:#000000; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;"></div>

javascript :
$(document).ready(function(){
$(window).scroll(resscrEvt);
$(window).resize(resscrEvt);
//$('body').append('<div id="fullBg" class="fullBg"></div>');
$("#clsw,#fullBg").click(closeWin);
});

function showWin(w,h){
$("#msg").height(h);
$("#msg").width(w);
var objWH=objValue("msg");
$("#fullBg").css({width:body_obj.w,height:body_obj.h+document.documentElement.scrollTop,display:"block"});
var tbT=objWH.split("|")[0]+"px";
var tbL=objWH.split("|")[1]+"px";
$("#msg").css({top:tbT,left:tbL,display:"block"});
}
function objValue(obj){
var body_obj = get_body();
var st=document.documentElement.scrollTop;//滾動條距頂部的距離
var sl=document.documentElement.scrollLeft;//滾動條距左邊的距離
var objH=$("#"+obj).height();//浮動對象的高度
var objW=$("#"+obj).width();//浮動對象的寬度
var objT=Number(st)+(Number(body_obj.h)-Number(objH))/2;
var objL=Number(sl)+(Number(body_obj.w)-Number(objW))/2;
return objT+"|"+objL;
}
function resscrEvt(){
var body_obj = get_body();
var bjCss=$("#fullBg").css("display");
if(bjCss=="block"){
$("#fullBg").css({width:body_obj.w,height:body_obj.h+document.documentElement.scrollTop});
var objV=objValue("msg");
var tbT=objV.split("|")[0]+"px";
var tbL=objV.split("|")[1]+"px";
$("#msg").css({top:tbT,left:tbL});
}
}

function get_body(){
var ch,cw;
if (self.innerHeight) {
cw=self.innerWidth;
ch=self.innerHeight;
}else if (document.documentElement&&document.documentElement.clientHeight) {
cw=document.documentElement.clientWidth;
ch=document.documentElement.clientHeight;
} else if (document.body) {
cw=document.body.clientWidth;
ch=document.body.clientHeight;
}
return {w:cw,h:ch};
}

//關閉灰色背景和操作窗口
function closeWin(){
$("#fullBg").hide();
$("#msg").hide();
}

【下列文章您可能也有興趣】

沒有留言: