Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Extending Overlay Test Case 2
<!DOCTYPE html>
<title>Overlay Test</title>
<script type="text/javascript" src=""></script>
<style type='text/css'>
body {margin:10px}
.yui3-widget {outline:none}
.yui3-widget-mask {background-color:black; opacity:.1}
.yui3-facebook {font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size:14px; background:none; border:10px solid rgba(0,0,0,0.445);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0;}
.yui3-facebook .yui3-widget-hd {padding:8px 10px; background:none; background-color:#6D84B4; color:white; font-weight:bold;border:1px solid #3B5998; border-bottom:none}
.yui3-facebook .yui3-widget-bd {padding:15px; background:white; text-align:center;border:1px solid #3B5998; border-top:none;border-bottom:none}
.yui3-facebook iframe {border:none; overflow:hidden; width:380px; height:80px}
.yui3-facebook .yui3-widget-bd .fbUrl {text-align:left; background-color: #F2F2F2; margin:-15px -15px 10px -15px; border-bottom: 1px solid #CCCCCC; color: #999999; font-size: 12px; font-weight: 400; line-height: 1.2; padding: 9px 10px;}
.yui3-facebook .yui3-widget-ft {background-color:#F2F2F2;border:1px solid #3B5998; border-top:1px solid #ccc; text-align:right; padding:10px 0px 12px 0px;}
.yui3-facebook .yui3-widget-ft a {border: 1px solid #2A437E; color: #FFFFFF; font-size: 13px; font-weight: 700; margin:0px 10px 0 0; padding: 3px 6px; text-decoration: none; border-color: #29447E #29447E #1A356E; background-image: url(""); background-position: 0 -98px;}
.yui3-facebook-hidden {visibility:hidden}
<body class='yui3-skin-sam'>
<button id='btn'>Open Window</button><br />
<script type='text/javascript'>
YUI().use('widget', 'widget-stdmod', 'widget-position', 'widget-stack', 'widget-position-align', 'widget-position-constrain', 'widget-modality', 'widget-autohide', function (Y) {
var fb, FbLike;
/* AS a subclassed/extended Overlay */
//FbLike = Y.Base.create('facebook', Y.Overlay, [Y.WidgetModality, Y.WidgetAutohide], {
FbLike = Y.Base.create("facebook", Y.Widget, [Y.WidgetStdMod, Y.WidgetPosition, Y.WidgetStack, Y.WidgetPositionAlign, Y.WidgetPositionConstrain, Y.WidgetModality, Y.WidgetAutohide], {
init: function(config) {
// Why can't these be in my ATTR object?
Y.mix(config, {
modal: true,
hideOn: [{eventName: 'clickoutside'}]
// continue with the superclass method
FbLike.superclass.init.apply(this, arguments);
bindUI: function() {
//this._myBind(); //won't bind here - footerContent not yet in place ???
this.after('facebook:footerContentChange', Y.bind(this._myBind, this));
_myBind: function() {
var fb = this;
this.get('boundingBox').one('a').on('click', function(e){
}, {
width: {value:400},
centered: {value:true},
zIndex: {value:100},
render: {value:true},
visible: {value:false},
headerContent: {value:"Title"},
bodyContent: {value:"<div class='fbUrl'>Subtitle</div><div class='fb-like'>content</div>"},
footerContent: {value: "<a class='close' href='#'>Close</a>"}
fb = new FbLike({});'#btn').on('click', function(e) {});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.