Question

我在“Twitter Bootstrap：打印模态窗口内容”的问题上按照了答案，但我还没有得到任何打印内容。我正在使用PHP循环并在我的Carousel中显示多个图像，并且可以在模态中正确显示单击的图像，但是当单击模态上的“打印”按钮时，没有任何反应，我没有收到任何错误消息。

我的模态代码：

<?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>

Answer 1

负责显示“打印”对话框的部分是：

document.getElementById("btnPrint").onclick = function() {
    window.print();
}

您还可以将html更改为：

 <button id="btnPrint" onclick="window.print()">Print</button>

无法让“打印”按钮在Carousel的Twitter Bootstrap模式弹出窗口中工作

1 个答案: