title: Printing Bootstrap modal window returns blank page
body: <p>I am trying to print the contents of a Bootstrap modal window. The code I have, used to work but it no longer does. Content is added to the form in a separate function using appendChild(), however when attempting to print nothing is shown in the print preview, just a blank page. I'd appreciate any suggestions as to why this is happening now and how to fix it. </p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div id="printThis"&gt;
      &lt;div class="modal inmodal" id="shipping_label" tabindex="-1" role="dialog"  aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content animated fadeIn"&gt;
                  &lt;div class="modal-header no-print" style="border:0px;"&gt;
                      &lt;button type="button" class="close no-print" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body-shippinglabel"&gt;
                      &lt;img alt="image" class="img-rounded" src="img/***.png" style="height: 25%; width: 25%;" /&gt;
                      &lt;div class="ibox-content" style="border:0px"&gt;
                          &lt;form id="recipientData" action="#" class="wizard-big"&gt;
                              &lt;input class="no-print" id="shippingID" name="ShippingID" style="display:none"&gt;
  
                          &lt;/form&gt;
                      &lt;/div&gt;
                      &lt;button type="button" class="btn btn-primary no-print" id="printLabel"&gt;Print&lt;/button&gt;
                      &lt;button type="button" class="btn btn-primary no-print" id="saveLabel"&gt;Save&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my CSS:</p>
  
  <pre><code>@media print {
      nav.navbar-static-side {
          display: none;
      }
      body {
          overflow: visible !important;
      }
      #page-wrapper {
          margin: 0;
      }
  }
  
  @media screen {
      #printSection {
          display: none;
      }
  }
  
  @media print {
      body * {
          visibility:hidden;
      }
      #printSection, #printSection * {
          visibility:visible;
      }
      #printSection {
          position:absolute;
          left:0;
          top:0;
      }
  }
  
  @media print {    
      .no-print, .no-print * {
          display: none !important;
       }
  }
  </code></pre>
  
  <p>And this is my JavaScript function:</p>
  
  <pre><code>//Add function to print label button
  var printLabel = document.getElementById('printLabel');
  printLabel.onclick = function(){
      printElement(document.getElementById("printThis"));
      window.print();
  }
  
  function printElement(elem) {
      var domClone = elem.cloneNode(true);
  
      var $printSection = document.getElementById("printSection");
  
      if (!$printSection) {
          var $printSection = document.createElement("div");
          $printSection.id = "printSection";
          document.body.appendChild($printSection);
      }
  
      $printSection.innerHTML = "";
      $printSection.appendChild(domClone);
  }
  </code></pre>