Предварительный просмотр HTML через JavaScript или JQuery

Я хотел бы создать быстрое окно предварительного просмотра HTML, которое берет содержимое текстовой области и показывает его в модальном диалоге с помощью одной кнопки закрытия. Содержимое должно отображаться как HTML.

Не знаю, как это сделать .. как лучше?


preview html jquery modal-dialog
person Caveatrob    schedule 16.07.2010    source источник
comment
Какая часть сбивает вас с толку?   -  person Matchu    schedule 16.07.2010
comment
Вы можете использовать любое из этих модальных окон: kirank.blog.com /2009/10/31/jquery-model-box ColorBox стал еще одним очень популярным.   -  person Sarfraz    schedule 16.07.2010
comment
@Matchu: Я полагаю, что еще не участвовал ... Он вероятно ищет готовые решения для коробок с моделями.   -  person Sarfraz    schedule 16.07.2010

Ответы (1)


arrow_upward
5
arrow_downward

Если вы используете пользовательский интерфейс jQuery, что-то вроде этого:

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');
}
person casablanca    schedule 16.07.2010
comment
Где угодно. Просто добавьте где-нибудь ссылку или кнопку и вызовите preview при нажатии, например: <button onclick="preview();">Preview</button> - person casablanca; 16.07.2010