YUI3 Overlay – Working Example with Code

Here is fourth post about YUI. It will result in Facebook like draggable floating div using YUI3. Earlier post about YUI3 were .

This post is regarding Overlay using YUI3.

This a how the overlay look:
YUI-overlay-demo.png

Live Demo of YUI3 Overlay.

Look of my CSS is not that great (you can make it look better!) but functionality is good. The overlay will come at the invoking point and the overlay is draggable. Overlay text can be changed. Place the pointer on header to move the overlay. Enjoy the comments left in the code to understand it better.
A Overlay box below the parent box will come after clicking on Show link. It comes and goes when clicked on Show and Hide Link. Or Overlay can be closed by clicking on close link inside Overlay itself. Overlay will also close itself if user clicks anywhere on the document. It is generally the default action seen on web. It is well commented code so that you can remove whatever functionality you do not want. Header is draggable. If you do not need draggable box then just remove a block of code in JavaScript code (well commented) and remove a css line about cursor:move.

Overlay Example HTML:


<body bgcolor="lightblue">
<p>A Overlay box below the parent box. It comes and goes when clicked on Show  and Hide Link. Or Overlay can be closed by clicking on close link inside Overlay itself.
	Header is draggable. If you do not need draggable box then just remove a block of code in JavaScript code (well commented) and remove a css line about cursor:move.
	</p>
<div class="overlay-example" id="overlay-position">Overlay:
	<a id="show" href="#">Show</a>
	<a id="hide" class="hide" href="#">Hide</a>
	<div id="filler">filler filler. </div>
	<div id="overlay" class="yui3-overlay-loading">
	    <div class="yui3-widget-hd">Overlay Header</div>
	    <div class="yui3-widget-bd">Overlay Body</div>
	    <div class="yui3-widget-ft">Overlay Footer <a class="hide" href="#" style="position:absolute;right:10px;">Close</a></div>
	</div>
</div>

Overlay Example CSS:


/* .yui3-js-enabled  is added by yui seed file if Js is enabled for use by widget etc classes.  */
/* Hide if js is enabled so that user don't see half baked content. Using Js widget will unhide it. */
.yui3-js-enabled .yui3-widget-loading {
   display: none;
}
.yui3-js-enabled .yui3-overlay-loading {
	position:absolute;
	top:-1000em;
	left:-1000em;
}
/* .yui3-overlay-loading becomes  yui3-overlay-content with the help of YUI */
.yui3-overlay-content {
	position:relative;
	background:gray;
	z-index:1000;
	border:2px solid black;
	-moz-box-shadow:5px 5px 5px #ccc;
	-webkit-box-shadow:5px 5px 5px #ccc;
}
.yui3-overlay-content div {
	padding:5px;
}
.yui3-widget-hd {
	border-bottom:2px solid #999;
	font-weight:bold;
	cursor:move; /* If you comment the draggable code then uncomment it as well.  */
}
.yui3-widget-bd {
	border-bottom:2px solid #999;
	min-height:200px;
}
.yui3-widget-ft {
	border-bottom:2px solid #999;
}

Overlay Example JavaScript: the main part


<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script>
YUI().use('overlay', 'node','dd-constrain', function(Y) {
	// detect the click anywhere other than overlay element to close it.
	Y.one(document).on('click', function(e) {
		// Below code is causing the Overlay to close as soon as it is open. Need to detect the state of overlay.
		// When it is already open then the below code should fire.
		if(e.target.ancestor('#overlay')=== null && e.target.get('id') != 'show' && overlay.get('visible') == true)  {
			overlay.hide();
		}
	});
	// Click detection is over
	// Create an overlay from markup, using an existing contentBox.
	var xy = Y.one("#overlay-position").getXY();
	var overlay = new Y.Overlay({
	    srcNode:"#overlay",
	    width:"400px",
	    height:"auto",
		visible:false,
	    xy:[xy[0] + 10, xy[1] + 35] /* default coordinate is 0,0 */
	});
	overlay.render();	/* Passing element Id is of no use here. It need xy position anyway. */
	Y.on("click",  Y.bind(overlay.show, overlay) , "#show");
	Y.on("click", Y.bind(overlay.hide, overlay), ".hide");
	// make overlay draggable
	new Y.DD.Drag({
        node : overlay.get('boundingBox'), /* What is boundingBox? http://goo.gl/QSC2U */
        handles : ['.yui3-widget-hd']
    }).plug(Y.Plugin.DDConstrained, { constrain2view : true });
	// End Draggable box code
});
</script>

Inside overlay config, headerContent, bodyContent and footerContent can also be passed if 'srcNode' is not passed to create overlay dynamically.

Hope you have enjoyed the draggable YUI3 Overlay!

To know more:
http://yuilibrary.com/yui/docs/overlay/index.html

http://yuilibrary.com/yui/docs/overlay/overlay-xy.html

http://yuiblog.com/sandbox/yui/3.3.0pr3/examples/overlay/overlay-align.html

http://yuiblog.com/sandbox/yui/3.3.0pr3/examples/overlay/overlay-align_clean.html

http://yuilibrary.com/yui/docs/overlay/overlay-stack.html

http://developer.yahoo.com/yui/3/examples/overlay/overlay-stdmod.html

http://925html.com/code/facebook-style-overlay-in-yui-3-css-3/