title: Background Content Prints when Printing Modal Contents in IE
body: <p>I am trying to print the contents of a Bootstrap Modal.  This works well in Chrome, but in IE, when the modal prints the entire page contents overlap.  I have tried a few solutions found <a href="https://stackoverflow.com/questions/12181760/twitter-bootstrap-print-content-of-modal-window">Here</a>, but I can't get any of them to work for me.</p>
  
  <p>Here is my HTML for my modal:</p>
  
  <pre><code> &lt;div ng-cloak&gt;
      &lt;div id="stack4" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;"&gt;
          &lt;div class="modal-dialog modal-responsive"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h4 class="modal-title"&gt;&lt;span ng-bind="title"&gt;&lt;/span&gt;&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      @Html.Partial("_PrintSSQ")
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;span class="pull-left"&gt;&lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Close&lt;/button&gt;&lt;/span&gt;&lt;span class="pull-right"&gt;&lt;button type="button" class="btn btn-primary" ng-click="savePdf()"&gt;Prepare Print View&lt;/button&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Depending on the user's selection via checkbox it inserts which partial view to print using the following:</p>
  
  <pre><code>    &lt;div id="saveToPdf"&gt;
          &lt;div ng-repeat="ps in print.sections" &gt;
              &lt;div ng-if="ps.QuestionSectionID == 1"&gt;
                  &lt;div&gt;&lt;h4&gt;{{ps.vchSectionName}}&lt;/h4&gt;&lt;/div&gt;
                  @Html.Partial("_PrintCompanyProfile")
  
                  &lt;br /&gt;
              &lt;/div&gt;
              &lt;div ng-if="ps.QuestionSectionID == 2"&gt;
                  &lt;div&gt;&lt;h4&gt;{{ps.vchSectionName}}&lt;/h4&gt;&lt;/div&gt;
                  @Html.Partial("_PrintCompanyServices")
  
                  &lt;br /&gt;
              &lt;/div&gt;
              &lt;div ng-if="ps.QuestionSectionID == 3"&gt;
                  &lt;div&gt;&lt;h4&gt;{{ps.vchSectionName}}&lt;/h4&gt;&lt;/div&gt;
                  @Html.Partial("_PrintInformationRelease")
  
                  &lt;br /&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>   @media print {
    body {
      visibility:hidden;
    }
    #printSection, #printSection {
      visibility:visible;
    }
    #printSection {
      position:absolute;
      left:0;
      top:0;
    }
  }
  </code></pre>
  
  <p>Here is my Angular Controller js:</p>
  
  <pre><code>$scope.savePdf = function () {
      printElement(document.getElementById('saveToPdf'));
      window.print();
  
  };
  function printElement(elem, append, delimiter) {
      var domClone = elem.cloneNode(true);
  
      var $printSection = document.getElementById("printSection");
  
      if (!$printSection) {
          var $printSection = document.createElement("div");
          $printSection.id = "printSection";
          document.body.appendChild($printSection);
      }
  
      if (append !== true) {
          $printSection.innerHTML = "";
      }
  
      else if (append === true) {
          if (typeof (delimiter) === "string") {
              $printSection.innerHTML += delimiter;
          }
          else if (typeof (delimiter) === "object") {
              $printSection.appendChlid(delimiter);
          }
      }
  
      $printSection.appendChild(domClone);
  }
  </code></pre>
  
  <p>The modal displays like this:</p>
  
  <p><a href="https://i.stack.imgur.com/tLfKK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tLfKK.png" alt="enter image description here"></a></p>
  
  <p>but it prints like this:</p>
  
  <p><a href="https://i.stack.imgur.com/klxVk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/klxVk.png" alt="enter image description here"></a></p>
  
  <p>This is critical as most of our users use IE.  Any assistance is greatly appreciated!!!!</p>