ページの残りではないモーダルウィンドウを印刷

Question

私はこれにいくつかの答えを見ましたが、私は実際にCSSの問題があると思います。ここで

は私のHTMLのサンプルフラグメントである：私はモーダルを開くポップすると

<id=container> children <id="modal">children</modal></container> 

は、印刷ボタンがあります。私がクリックすると、.noprintを#containerに、.printを#modalに適用するためにjQueryを使用します。しかし、モーダルへの.printは無視されます。どのセレクタを適用しても、モーダルコンテンツを表示することはできません。さらに悪いことに、私は火薬瓶を使用することはできません。それは、どの印刷スタイルが適用されているのか私には見せていません。私は試しました #container #modal.print {display: block; }など

ありがとう！

Answer 1

あなたのモーダル要素は、その音からコンテナの内側にあります。私はあなたがこのようなマークアップを持っていると思います。

<div id="container"> 
    <span>children</span> 
    <p>more children> 
    <div id="modal"> 
     Modal text! 
    </div> 
</div> 

そして、このようなCSS

...あなたはJavaScriptを使用

.noprint { display: none;} 
.print {display: block;} 

はこのように、適用する：これらの例では

<div id="container" class="noprint"> 
    <span>children</span> 
    <p>more children> 
    <div id="modal" class="print"> 
     Modal text! 
    </div> 
</div> 

は、#modal要素が隠さの内側にありますコンテナ。 CSSの仕様では、親要素が隠されている場合は、display: block（またはその他の有効なdisplayの値）に設定されているか、絶対配置されていても、すべての子が非表示になります。あなたはモーダル要素を制御することはできません場合は

<div id="modal"> 
    Modal Text! 
</div> 
<div id="container"> 
    <span>children</span> 
    <p>more children> 
    <div id="modal"> 
     Modal text! 
    </div> 
</div> 

：あなたがあなたのモーダルウィンドウを除き、ページ上のすべてを非表示にするかなければならない場合は、あなたのマークアップはこのような何かを構造化するために取得された何

jQueryを使用してモーダル要素の位置を変更することができます。

// Moves the element outside of the hidden container 
$("#container").before($("#modal")); 

Answer 2

モーダルウィンドウの内容を印刷する別の方法があります。私はこれを試してみましたし、それが動作するウィンドウ

Print contents of ModalPanel

をモーダルには、この関数を追加します。スタイルシートで遊んでみるだけです。