java转发页面遮罩,Jquery实现遮罩整个页面。该如何处理

当前位置:我的异常网» Java Web开发 » Jquery实现遮罩整个页面。该如何处理

Jquery实现遮罩整个页面。该如何处理

www.myexceptions.net  网友分享于：2013-01-12  浏览：543次

Jquery实现遮罩整个页面。

用到的包

父页面的内容

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; //如果有关闭按钮，则给关闭按钮绑定关闭事件

},

子页面中的内容：

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

------解决方案--------------------

能把解决方法贴上来一起学习不

------解决方案--------------------

学习。。。

文章评论