Turn hidden DIV into a window with YUI or Ext JS

Question

A beginner's question. I have a bit of rich HTML inside a hidden div, and want to turn it into a floating, draggable, closeable pseudo-window, modeless dialog. YUI and ExtJS are available.

I have tried several hours and sought through samples in the net. The window title should be gotten from a DOM node too, but is plain text.

    var helpDiv = ... DOM node
    var helpDivExt = Ext.get(helpDiv);
    var contentHTML = '<i>helpDivExt</i>';
    //var contentTitel = '###' + helpDivExt.select('h3');
    var contentTitel = '###' + Ext.query('h3:first', helpDivExt).data;
    var w = new Ext.Window({html: contentHTML, title: contentTitel,
        width: '398px', height: '400px',
        modal: false, closable: true, draggable: true,
        plain: true,
        padding: '5px 10px 10üpx 10px',
        border: '5px solid #7094b7',
        backgroundColor: '#ffffff'
    });
    w.addClass('hilfetext');
    //w.fill(helpDivExt);
    //w.add(helpDivExt);
    w.show();

Answer 1

In ExtJS Ext.Window there is contentEl config where you put in an existing HTML element, or the id of an existing HTML element:

eg

new Ext.Window({contentEl: 'the_element_id'});

Further info here

Answer 2

Using YUI you can do it very easily. Just get the content and the title, create a Panel and make it draggable:

YUI().use('panel', 'dd-plugin', function (Y) {

  var panel = new Y.Panel({
    headerContent: Y.one('#panel-title').getData('title'),
    bodyContent: Y.one('#hidden').getHTML()
  });
  panel.render();

  panel.plug(Y.Plugin.Drag, {
    // set the handle to the header node so that the panel
    // can only be dragged from the header
    handles: ['.yui3-widget-hd']
  });

});