Jquery实现遮罩整个页面。

jinlin516293816 2011-08-02 01:16:47

用到的包
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/popup_layer.js"></script>
父页面的内容
var PopupLayer = new Class({
options:{
trigger: "#message_box ", //子页面中图片按钮的名称
popupBlk:"ff", //弹出内容层元素或id,必填参数
closeBtn:"closebutton", //关闭弹出层的元素或id
popupLayerClass:"popupLayer", //弹出层容器的class名称
eventType:"click", //触发事件的类型
offsets:{ //弹出层容器位置的调整值
x:0,
y:0
},
useFx:false, //是否使用特效
useOverlay:false, //是否使用全局遮罩
usePopupIframe:true, //是否使用容器遮罩
isresize:true, //是否绑定window对象的resize事件
onBeforeStart:function(){} //自定义事件
},
_init:function(options){
this.setOptions(options); //载入设置
this.isSetPosition = this.isDoPopup = this.isOverlay = true; //定义一些开关
this.popupLayer = $(document.createElement("div")).addClass(this.options.popupLayerClass); //初始化最外层容器
this.popupIframe = $(document.createElement("iframe")).attr({border:0,frameborder:0}); //容器遮罩,用于屏蔽ie6下的select
this.trigger = $(this.options.trigger); //把触发元素封装成实例的一个属性，方便使用及理解
this.popupBlk = $(this.options.popupBlk); //把弹出内容层元素封装成实例的一个属性
this.closeBtn = $(this.options.closeBtn); //把关闭按钮素封装成实例的一个属性
$(this).trigger("onBeforeStart"); //执行自定义事件。
this._construct() //通过弹出内容层，构造弹出层，即为其添加外层容器及底层iframe
this.trigger.bind(this.options.eventType,function(){ //给触发元素绑定触发事件
if(this.isSetPosition){
this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
}
this.options.useOverlay?this._loadOverlay():null; //如果使用遮罩则加载遮罩元素
(this.isOverlay && this.options.useOverlay)?this.overlay.show():null;
if(this.isDoPopup && (this.popupLayer.css("display")== "none")){
this.options.useFx?this.doEffects("open"):this.popupLayer.show();
}
}.binding(this));
this.isresize?$(window).bind("resize",this.doresize.binding(this)):null;
this.options.closeBtn?this.closeBtn.bind("click",this.close.binding(this)):null; //如果有关闭按钮，则给关闭按钮绑定关闭事件
},

子页面中的内容：

<div id="message_box" class="tigger"><a href="javascript:;" onMouseOver="MM_swapImage('Image3','','../images/img/pay_on.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/img/ss.jpg" name="Image3" width="71" height="25" border="0" id="Image3"></a></div>

父页面是一个框架子页面包含在里面，现在我想点这个图片调用负页面中的显示出来。

...全文