Как скопировать весь контент (<p><strong>) из div и вставить в модал - PullRequest
Новая
       1

Как скопировать весь контент (<p><strong>) из div и вставить в модал

0 голосов
/ 07 января 2020

На веб-сайте, над которым я работаю, есть раздел для персонала, и у каждого сотрудника есть биография: моя идея состоит в том, что, если пользователь нажимает на кнопку «читать дальше», открывается модальное окно и отображается биография. Я пытаюсь сделать так, чтобы onclick получил биографию персонала и передал ее модалу, есть ли способ скопировать и вставить весь код, включая <p><strong>, чтобы он сохранил стиль? 

function openModal(id) {
  console.log(id);
  modal.style.display = "block";
  var content = document.getElementById(id);
  modalContent.innerHTML = content.text;
  console.log(content);
}
<div id="myModal" class="myModal">
  <button onclick="closeModal()">&times;</button>
  <div id="modalContent"></div>
</div>
<div class="description">
  <h2>Exercitation</h2>
  <p onclick="openModal('1')">Read more...</p>
  <div id="1">
    <h2> Exercitation ullamco laboris nisi</h2>
    <hr>
    <p><strong>adipisicing elit</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
<div class="description">
  <h2>Exercitation</h2>
  <p onclick="openModal('2')">Read more...</p>
  <div id="2">
    <h2> Exercitation ullamco laboris nisi</h2>
    <hr>
    <p><strong>adipisicing elit</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

Ответы [ 4 ]

2 голосов
/ 08 января 2020

попробуйте это: 

//You get the HTML of the element with innerHTML property.
var content = document.getElementById(id).innerHTML;

//I assume you have define modalContent variable somewhere else in your js file, so:
modalContent.innerHTML = content;

Вы можете сделать все это также в одной строке:

document.getElementById("modalContent").innerHTML = document.getElementById(id).innerHTML;

1 голос
/ 08 января 2020

Поскольку вопрос был помечен jQuery, я предлагаю решение, использующее это.

Вы можете просмотреть его в jsFiddle .

Я изменил ваш код, Вот краткое описание того, что я изменил:

  1. Сначала я удалил встроенные атрибуты onClick и вместо этого использовал jQuery s $(element).on('click', function)
  2. Затем я добавил классы, такие как .open-modal и .close-modal, где это уместно. При таком подходе вам не нужно передавать идентификатор элемента, вы можете просто получить контент, ближайший к нажатой кнопке.
  3. Я добавил класс .modal-info в информационный контейнер, чтобы упростить таргетинг .
  4. Наконец, я обработал все открытия / закрытия с помощью jQuery.

HTML: 

    <div id="myModal" class="myModal">
        <button class="close-modal">&times;</button>
        <div id="modalContent">
        </div>
    </div>

    <div class="description">
        <h2>Exercitation</h2> 
        <p class="open-modal">Read more...</p>
        <div id="1" class="modal-info">
            <h2>#1 Exercitation ullamco laboris nisi</h2>
            <hr>
            <p><strong>adipisicing elit</strong></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>


    <div class="description">
        <h2>Exercitation</h2> 
        <p class="open-modal">Read more...</p>
        <div id="2" class="modal-info">
            <h2>#2 Exercitation ullamco laboris nisi</h2>
            <hr>
            <p><strong>adipisicing elit</strong></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

jQuery: 

$('.open-modal').on('click', open_modal);

$('.close-modal').on('click', close_modal);

function open_modal() {

  // Modal container
  var $modal = $('#myModal');

  // Get content container
  var $modal_content = $('#modalContent');

  // Empty existing content first
  $modal_content.empty();

  // Get new content
  // $(this) is the .open-modal element that was clicked
  // I'm using jQuery siblings() to get the nearest .modal-info element
  var new_modal_content = $(this).siblings('.modal-info').html();

  // Set new content
  $modal_content.html(new_modal_content);

  // Display modal
  $modal.show();

}

function close_modal(){

    var $modal = $('#myModal');

    if($modal.is(':visible')){
        $modal.hide();
  }

}

CSS: 

#myModal {
  display: none;
}

.modal-info {
  display: none;
}

Хотя это не идеально и может быть улучшено. Тем не менее, я думаю, что легче поддерживать, чем встроенные атрибуты onClick, а что нет.

1 голос
/ 08 января 2020

Вам нужно объявить модал в вашей функции, а также взять content s innerHTML и назначить его на modalContent, чтобы это работало: 

function openModal(id) {
  var modal = document.getElementById('myModal');
  var modalContent = document.getElementById('modalContent');
  console.log(id);
  modal.style.display = "block";
  var content = document.getElementById(id);
  modalContent.innerHTML = content.innerHTML;
  console.log(content);
}
<div id="myModal" class="myModal">
  <button onclick="closeModal()">&times;</button>
  <div id="modalContent">

  </div>
</div>

<div class="description">
  <h2>Exercitation</h2>
  <p onclick="openModal('1')">Read more...</p>
  <div id="1">
    <h2> Exercitation ullamco laboris nisi</h2>
    <hr>
    <p><strong>adipisicing elit</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>


<div class="description">
  <h2>Exercitation</h2>
  <p onclick="openModal('2')">Read more...</p>
  <div id="2">
    <h2> Exercitation ullamco laboris nisi</h2>
    <hr>
    <p><strong>adipisicing elit</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
1 голос
/ 08 января 2020

Вот подход с использованием jQuery s html(): 

function openModal(id) {
  //the div's content, HTML included
  //equivalent to Vanilla JS's innerHTML
  content = $("#" + id).html(); 
  
  console.log(content);
  
  //inset that HTML content into the div of ID 'modalContent'
  $("#modalContent").html(content);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="description">
        <h2>Exercitation</h2> 
        <p onclick="openModal('1')">Read more...</p>
        <div id="1">
            <h2> Exercitation ullamco laboris nisi</h2>
            <hr>
            <p><strong>adipisicing elit</strong></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...