StickyWin.Fx

docs

The StickyWinFx.js file extends StickyWin so that it fades in an out (woot). In addition to that, if you also include StickyWinFx.Drag.js, then you can make the popup resizable and/or draggable. The class (StickyWin) is used in all three cases. If you don't include StickyWinFx.Drag.js, then the options for dragging and resizing won't work, but it won't break or anything.

<div style="border: 1px solid black;background-color: #ccc; padding: 2px; width: 200px;"> Hi. I'm a stickyWin. You can <a href="javascript:void(0);" class="closeSticky">close me</a> if you want. Or you can <a href="javascript: void(0);" class="pinSticky">pin me in place</a>. </div>

new StickyWin({
  content: $('stickyWinContent').get('value'),
  fadeDuration: 600
});

<div style="border: 1px solid black;background-color: #ccc; padding: 2px; width: 80%; height: 60%"> <div class="handle" style="background-color: #333; color: #fff;cursor:pointer">drag handle</div> Hi. I'm a StickyWin. You can <a href="javascript:void(0);" class="closeSticky">close me</a> if you want. </div><br style="clear:both"> <a href="javascript:void(0)" class="resizer" style="float:right;cursor:nw-resize">resize</a>

new StickyWin({
  content: $('stickyWinFxContent').get('value'),
  draggable: true,
  dragHandleSelector: 'div.handle',
  resizable: true,
  resizeHandleSelector: 'a.resizer',
  width: 300,
  height: 160
});

Ok, it's not pretty, but what it looks like is up to you. Just style it like you would anything else on your page.

Using the StickyWin.ui function, here's a prettier draggable box:

new StickyWin({
  content: StickyWin.ui('the caption; drag here', 'this is the body', {width: '400px'}),
  draggable: true
});