Printing Bootstrap modal window returns blank page

Question

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.

This is my HTML:

<div id="printThis">
    <div class="modal inmodal" id="shipping_label" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated fadeIn">
                <div class="modal-header no-print" style="border:0px;">
                    <button type="button" class="close no-print" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                </div>
                <div class="modal-body-shippinglabel">
                    <img alt="image" class="img-rounded" src="img/***.png" style="height: 25%; width: 25%;" />
                    <div class="ibox-content" style="border:0px">
                        <form id="recipientData" action="#" class="wizard-big">
                            <input class="no-print" id="shippingID" name="ShippingID" style="display:none">

                        </form>
                    </div>
                    <button type="button" class="btn btn-primary no-print" id="printLabel">Print</button>
                    <button type="button" class="btn btn-primary no-print" id="saveLabel">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>

This is my CSS:

@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;
     }
}

And this is my JavaScript function:

//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);
}

Answer 1

@Alex Morrison

Please try below code for printing the modal :

document.getElementById("btnPrint").onclick = function () {
    printElement(document.getElementById("printThis"));
}

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);
    window.print();
}

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!---------------------->
<div class="wrap">
  <h1>Bootstrap Modal Example</h1>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal">
    Large modal
  </button>
</div>
 <div id="printThis">
<div id="MyModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  
  <div class="modal-dialog modal-lg">
    
    <!-- Modal Content: begins -->
    <div class="modal-content">
      
      <!-- Modal Header -->
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="gridSystemModalLabel">Your Headings</h4>
      </div>
    
      <!-- Modal Body -->  
      <div class="modal-body">
        <div class="body-message">
          <h4>Any Heading</h4>
          <p>And a paragraph with a full sentence or something else...</p>
        </div>
      </div>
    
      <!-- Modal Footer -->
      <div class="modal-footer">
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      <button id="btnPrint" type="button" class="btn btn-default">Print</button>
      </div>
    
    </div>
    <!-- Modal Content: ends -->
    
  </div>
    </div>
</div>

I hope above code will be useful for you. Thank you.