0

「Twitter Bootstrap：モーダルウィンドウの内容を印刷する」という質問の回答に従いましたが、まだ何も印刷することができませんでした。PHP を使用してカルーセルにいくつかの画像をループして表示し、クリックした画像をモーダルに正しく表示できますが、モーダルの [印刷] ボタンをクリックしても何も起こらず、エラー メッセージも表示されません。

私のモーダルコード:

<?php
$launch_cnt = 0;
// Get images again for building modals
$media2 = Media::find_by_sql($sql);
foreach($media2 as $media2): 
    $launch_cnt++;
    $launch = "launch" . $launch_cnt;
        ?> 
        <section id=<?php echo $launch; ?> class="modal hide fade">
          <header class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </header>

          <div id="printThis">
            <div class="modal-body">
              <img src="../<?php echo $media2->image_path(); ?>"  />
            </div>
          </div>

          <footer class="modal-footer">
            <button id="btnPrint">Print</button>
            <button class="btn btn-primary" data-dismiss="modal">Close</button>
          </footer>
        </section>
    <?php  
    endforeach;
?>

http://jsfiddle.net/95ezN/3/の回答で指摘されている指示に従って、JS コードと CSS コードを実装しました。

いくつかのテストを行ったところ、問題は Javascript のどこかにあるようです。このコードを使用する場合 (終了タグの直前に配置):

<script>
alert("Hello World!");

document.getElementById("btnPrint").onclick = function() {
  printElement(document.getElementById("printThis"));
  window.print();
}
</script>

次に、「Hello World!」のアラート ポップアップが表示されます。が表示され、基本的にそこに到達したことがわかります。しかし、printElement という名前の必須関数を含めると、Alert ポップアップが表示されないため、JS はまったく実行されません。関数を含む完全な JS は次のとおりです。

<script>
alert("Hello World!");

document.getElementById("btnPrint").onclick = function() {
  printElement(document.getElementById("printThis"));
  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.appendChild(domClone);
}  ​
</script>
4

1 に答える 1