YUI3 overlay 弹出窗口的mask层模块

YUI.add('mask-overlay',function(Y){
	Y.maskOverlay = Y.Base.create("mask-overlay", Y.Widget, [Y.WidgetStdMod, Y.WidgetPosition, Y.WidgetStack, Y.WidgetPositionAlign, Y.WidgetPositionConstrain]);
	Y.maskOverlay.prototype.mrender = function(){
		this.render();
		var mask = Y.DOM.create("<div class='maskoverlay'></div>");
		Y.one(mask).appendTo(document.body);
		Y.one(mask).setStyle("width",Y.DOM.docWidth());
		Y.one(mask).setStyle("height",Y.DOM.docHeight());
		Y.one(this._posNode._node).setStyle("zIndex",Y.one(mask).getStyle("zIndex") + 1);
		this.mshow();
	};
	Y.maskOverlay.prototype.mshow =function(){
		Y.one(".maskoverlay").setStyle("display","block");
		this.show();
	};
	Y.maskOverlay.prototype.mhide =function(){
		Y.one(".maskoverlay").setStyle("display","hide");
		this.hide();
	};

}, '3.3.0' ,{requires:['widget', 'widget-stdmod', 'widget-position', 'widget-stack', 'widget-position-align', 'widget-position-constrain']});

 .maskoverlay{

	display:none;
	background-color:black;
	position:absolute;
	left:0;
	top:0;
	z-index:9999;
	opacity:0.5;
}

 

 

调用部分如下

YUI({ filter: 'raw' }).use("mask-overlay", function(Y) {

    /* Create Overlay from script, this time. No footer */
    var overlay = new Y.maskOverlay({
        width:"10em",
        height:"10em",
        headerContent: "Aligned Overlay",
        bodyContent: "Click the 'Align Next' button to try a new alignment",
        zIndex:2
    });

    /* Render it to #overlay-align element */
    overlay.mrender("#overlay-align");
	overlay.mshow();
    overlay.mhide();
});

 

就修改了3个方法

默认的render和show还有hide