HTML Preview via JavaScript or JQuery

Question

I'd like to throw together a quick HTML preview window that takes the contents of a text area and shows it in a modal dialogue with a single close button. The contents should be rendered as HTML.

Not sure how to go about this.. what's the best way?

Answer 1

You can go for any of these modal boxes:

http://kirank.blog.com/2009/10/31/jquery-model-box/

ColorBox is another getting very popular.

Answer 2

If you're using jQuery UI, something like this:

HTML

<textarea id="mytext"></textarea>
<div id="dialog"></div>

JavaScript

$('#dialog').dialog({ modal: true, autoOpen: false });

function preview() {
  $('#dialog').html($('#mytext').val());
  $('#dialog').dialog('open');
}