YUI: Overlay with rounded corners & a knob
This is a test. This is a test. This is a test. This is a test. This is a test.
The HTML
This is a test. This is a test. This is a test. This is a test. This is a test.
The Javascript
(function() { var Event = YAHOO.util.Event, panel = null; Event.onDOMReady(function() { panel = new YAHOO.widget.Overlay('dlg', { visible: true, height: '150px', width: '250px', xy: [100, 100] }); panel.render(document.body); }); dp.SyntaxHighlighter.HighlightAll('code'); })();
The CSS
#dlg { width: 250px; height: 150px; background-color: #F9F9F9; border: 1px solid #636363; margin: 0; padding: 0; position: absolute; overflow: visible; } #dlg .hd { display: none; } #dlg .bd { padding: .25em; } #dlg .corner_tr { background-image: url( graphics/tr.gif); position: absolute; background-repeat: no-repeat; top: -1px; right: -1px; height: 4px; width: 4px; } #dlg .corner_tl { background-image: url( graphics/tl.gif); background-repeat: no-repeat; position: absolute; top: -1px; left: -1px; height: 4px; width: 4px; } #dlg .corner_br { background-image: url( graphics/br.gif); position: absolute; background-repeat: no-repeat; bottom: -1px; right: -1px; height: 4px; width: 4px; } #dlg .corner_bl { background-image: url( graphics/bl.gif); background-repeat: no-repeat; position: absolute; bottom: -1px; left: -1px; height: 4px; width: 4px; } #dlg .knob { background-image: url( graphics/knob.png); background-repeat: no-repeat; position: absolute; top: 60px; z-index: 999; right: -14px; height: 18px; width: 14px; }