2

ここで例を作成しましたが、私のサイトでも同じ問題があります。
http://jsfiddle.net/WnsfD/

<a href="#" data-dismiss="modal" class="btn btn-inverse btn-small" aria-hidden="true" onclick="printDiv('print')"><i class="icon-white icon-print"></i> Print</a>

これは私が問題を抱えている分野です。（コードがないと投稿できないからです）

ここはかなりカットアンドドライだと思います。JavaScript がモーダル ウィンドウから印刷ダイアログを開きますが、印刷またはキャンセルすると、モーダル ウィンドウが開いたままになります。後で閉じることができないことに気付いたので、閉じるボタンと同じように閉じるように設定しましたが、同じ効果です。モーダルを閉じるためだけにページを更新する必要はありません。

注:印刷スクリプトを提供してくれたユーザーKevinに感謝します。

4

2 に答える 2

2

ここでの問題は、要素のHTMLを変数にコピーすると、生のHTMLのみが保持され、JSイベントなどは保持されないということです。したがって、元に戻すと、JSイベントは発生しなくなります。

印刷スタイルの領域を使用するのがおそらく道のりです。ハンドラーを失わないように、現在の要素はそのままにしておきます。

私はあなたのフィドルを修正してフォークしました、そしてそれはうまくいくようです、しかしそれをより良くするためにあなたがすることができるより多くのCSS作業があるでしょう（テキストが薄い灰色であるように、あなたはそれを黒にすることができます）

http://jsfiddle.net/gAtMs/2/

基本的に、空の印刷領域（id = "printme"）用に新しいdivを作成しました。printDiv関数では、htmlをprintme divにコピーし、印刷後に削除します。

印刷用のCSSでは、divコンテナーの下にすべてを非表示にします。モーダルフッターを使用すると、印刷出力にボタンが不要になります。

また、通常の画面表示ではcssでprintmeを非表示にするため、印刷を押しても画面は変化しません。

HTMLをprintmedivにコピーする唯一の理由は、他のすべてを一度に簡単に非表示にするためです。

これがcssです...

#printme {
  display: none;
}

@media print {
  .container {
    display: none;
  }
  .modal-footer {
    display: none;
  }

  #printme {
    display: block;
  }

}
于 2013-01-31T00:52:30.923 に答える