title: How to Print Bootstrap Modal Exactly as the Display?
body: <p>so I'm having difficulties to print a modal with it's css. I wanted to print out a modal window exactly as it shown on the screen. I've used the <strong>window.print()</strong> command or even the javasript / jquery one. but the css is not attached. instead, it prints my modal only half way through.</p>
  
  <p>So, what I wanted is, this modal image :
  <a href="https://i.stack.imgur.com/SCllb.png" rel="nofollow noreferrer">Modal Example Image</a></p>
  
  <p>Will be printed to <strong>window.print()</strong> as what it shown on the screen. the whole modal block with the borders etc. but without the page behind it.</p>
  
  <p>codes I've tried :</p>
  
  <pre><code>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();
      }
  </code></pre>
  
  <p>If anyone would answer this, Thank You !</p>