Копирование содержимого div и вставка его в окно предварительного просмотра с помощью JQuery.

Question

Я создаю всплывающее окно и хочу показать содержимое Div во всплывающем окне. Как скопировать содержимое фонового окна и заставить его добавить его во всплывающее окно. Поскольку я хочу показать тот же предварительный просмотр панели бэкэнда во всплывающем окне. Как это сделать.

Где моя фоновая панель

 <div id="fb_contentarea_down21">
      <div id="field1">
         <input id="input1"></input>
      </div>
      <div id="field2">
        <textarea id="input2"></textarea>
      </div>
 </div>

И я хочу показать эти вещи (фон) в окне предварительного просмотра, как это сделать. следующее всплывающее окно ..

   <div id="popupContact" style="position: absolute; top: 208px; left: 436px; display: none;">
    <a id="popupContactClose">x</a>
    <h1>Title of our cool popup, yay!</h1>
    <p id="contactArea">

    </p>
</div>  

Как показать содержимое fb_contentarea_down21 в ContactArea ...

Answer 1

Вы можете клонировать фрагмент и добавить его во всплывающее окно.

$('#fb_contentarea_down21').clone().appendTo('#contactArea');

Единственная проблема заключается в том, что у вас в домене будут дублирующиеся идентификаторы, которые недопустимы и вы начнете играть хаос с вашими селекторами. Таким образом, вам придется переименовать все идентификаторы, которые могут запутаться

Лучше всего добавить фрагмент, а при закрытии всплывающего окна добавить фрагмент обратно

 $('#fb_contentarea_down21').children().appendTo('#contactArea');

затем при закрытии всплывающего окна

 $('#contactArea').children().appendTo('#fb_contentarea_down21');

Answer 2

Только для отображения текста внутри входов, а не клонов входов:

$('#contactArea').text(
    $('#fb_contentarea_down21 input').val() +
    $('#fb_contentarea_down21 textarea').val()
)

Answer 3

Я думаю, вы хотите функцию клона для этого. клонировать элемент в ваше всплывающее окно

$("#fb_contentarea_down21").clone().appendTo($("#ContactArea"));

функция * .clone () также может получать параметр bool так что если вы клонируете элемент, у которого есть события (например, кнопка с событием щелчка) передача true также будет включать в себя событие.

редактировать после комментария от redsquare

после выполнения клона вам нужно будет заменить все идентификаторы вновь созданных предметов. потому что клонирование приведет к нескольким элементам с одинаковым идентификатором.

другой возможностью было бы открыть iframe во всплывающем окне и использовать клон или .load () для копирования элементов в ваше всплывающее окно.