YUI().use('node', 'overlay', 'widget-anim', 'transition', 'node-event-delegate', function(Y) {
    var overlay = new Y.Overlay({
        srcNode: '#simpleOverlay',
        width: '300px',
        render: true
    }); 
    Y.one('#show').on('click',function(e){overlay.show();e.preventDefault();});
    Y.one('#hide').on('click',function(e){overlay.hide();e.preventDefault();});
});

<a href="#" id="show">Show</a> | <a href="#" id="hide">Hide</a>
<div id="simpleOverlay">
    <p>This is a simple overlay</p>
</div>

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
.yui3-overlay-mask { 
    background: rgba(255, 255, 255, 0.75);  
}

.yui3-widget #simpleOverlay {
    display: block;
    background:#eeeeee;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border:1px solid red;
    padding: 10px;
}

jsFiddle