YUI3 overlay 弹出窗口的mask层模块

最新推荐文章于 2022-11-16 20:15:41 发布

最新推荐文章于 2022-11-16 20:15:41 发布 · 236 阅读

文章标签：

#YUI #prototype

YUI3分析专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用 YUI 框架扩展 Widget 实现自定义遮罩层（Mask Overlay），并展示了如何通过覆盖默认的渲染、显示及隐藏方法来达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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