ブートストラップモードをディスプレイとして正確に印刷する方法は？

Question

私はそれがCSSのモーダルを印刷するのが難しいです。私は画面に表示されているようにモーダルウィンドウを正確に印刷したかったのです。私はwindow.print（）コマンド、またはjavasript/jqueryコマンドを使用しました。しかし、CSSは添付されていません。代わりに、私のモーダルを途中まで印刷します。

そうは、私が何を望むか、このモーダル画像： Modal Example Image

は、それが画面上に表示するものとして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); 
     window.print(); 
    } 

誰もがこれを答える場合は、ありがとうございました！

Answer 1

そんなにスタイルをテストし、印刷を使用することができますニーズに必ず設計の契約であるためには、@media印刷タグ内のすべてのCSSのみ印刷気分に適用されます

@media print { 
    model.class { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    left: 0; 
    top: 0; 
    width: 100%; /* Full width */ 
    height: 100%; /* Full height */ 
    overflow: auto; /* Enable scroll if needed */ 
    background-color: rgb(0,0,0); /* Fallback color */ 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
    } // or you can add what ever you want css in print mood 

@mediaプリントタグを使用することができますクロムブラウザの気分をチェックこのanswer