Search code examples
jqueryhtmlmodal-dialogpreview

HTML Preview via JavaScript or JQuery

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?

Solution

  • 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');
}