JSFiddle - React, Tailwind, and code Playground

by skip405

HTML

<div class="popup">
  some content from popup
</div>

<div class="page">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum possimus molestiae ullam? Laboriosam recusandae sunt dolorem culpa veniam non perspiciatis accusamus, placeat iure ipsum quidem saepe voluptatibus quisquam accusantium mollitia!
  <br />
  <button id="print">Print</button>
</div>

CSS

.popup {
  display: none;
}

.created {
  border: 1px solid black;
  font-weight: bold;
}

JavaScript

$("#print").on('click', function(){
	//find HTML
  var $popupContent = $('.popup').html();
  console.log($popupContent);
  
  //create the div before the button and put the popup content there
  $(this).before($('<div />', {
  	'class': 'created',
  	'html': $popupContent
  }));
  window.print();
  
  $('.created').remove();
})