Javascript 模态弹出打印问题_Javascript_Jquery_Css_Printing

Javascript 模态弹出打印问题

javascript jquery css printing

Javascript 模态弹出打印问题,javascript,jquery,css,printing,Javascript,Jquery,Css,Printing,我正在尝试打印弹出模型，但由于某些原因，单击“打印”按钮不会调用任何内容。我的Jscript、Css代码和HTML如下 Jscript <script> document.getElementById("btnPrint").onclick = function () { printElement(document.getElementById("outborder")); var modThis = document.querySelector("#pri

我正在尝试打印弹出模型，但由于某些原因，单击“打印”按钮不会调用任何内容。我的Jscript、Css代码和HTML如下

Jscript

    <script>
document.getElementById("btnPrint").onclick = function () {
    printElement(document.getElementById("outborder"));

    var modThis = document.querySelector("#printSection .modifyMe");
    modThis.appendChild(document.createTextNode(" new"));

    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);
}
</script>

任何帮助都将不胜感激

谢谢，Jayden你的页面上有很多JS错误。请检查您的开发工具。您也可以查看下面的代码片段。但是请注意，如果iframe调用

print

，则无法成功打印

document.getElementById（“btnprint”）.onclick=function（）{
printElement（document.getElementById（“outborder”）；
window.print（）；
}
功能打印元素（elem）{
var domClone=elem.cloneNode（真）；
var$printSection=document.getElementById（“printSection”）；
如果（！$printSection）{
var$printSection=document.createElement（“div”）；
$printSection.id=“printSection”；
文件.正文.附件（打印部分）；
}
$printSection.innerHTML=“”；
$printSection.appendChild（domClone）；
}

@媒体屏幕{
#印刷部{
显示：无；
}
}
@媒体印刷品{
正文*{
可见性：隐藏；
}
#打印部分，#打印部分*{
能见度：可见；
}
#印刷部{
位置：绝对位置；
左：0；
排名：0；
}
.模态内容{
显示：块；
}



&时代；
订单详情
订单号
订购日期
客户名称
付款方式
交付方式
装置
条件
伊梅
价格

“height=“75”width=“50”>
全部的


印刷品
取消

您的页面上有很多JS错误。请检查您的开发工具。您也可以检查下面的代码段。请注意，如果iframe调用了

print

，则无法成功打印

document.getElementById（“btnprint”）.onclick=function（）{
printElement（document.getElementById（“outborder”）；
window.print（）；
}
功能打印元素（elem）{
var domClone=elem.cloneNode（真）；
var$printSection=document.getElementById（“printSection”）；
如果（！$printSection）{
var$printSection=document.createElement（“div”）；
$printSection.id=“printSection”；
文件.正文.附件（打印部分）；
}
$printSection.innerHTML=“”；
$printSection.appendChild（domClone）；
}

@媒体屏幕{
#印刷部{
显示：无；
}
}
@媒体印刷品{
正文*{
可见性：隐藏；
}
#打印部分，#打印部分*{
能见度：可见；
}
#印刷部{
位置：绝对位置；
左：0；
排名：0；
}
.模态内容{
显示：块；
}



&时代；
订单详情
订单号
订购日期
客户名称
付款方式
交付方式
装置
条件
伊梅
价格

“height=“75”width=“50”>
    <?php
foreach ($orders as $order):
    $products = unserialize($order->order_cart);
    ?>
    <div id="<?php echo $order->order_id ?>" class="modal fade bs-example-modal-lg" role="dialog">
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
            <div id="outborder" style="
    border: 1px solid #000;
">
                <div class="modal-header">
                <center><img src="http://www.webuyback.com.au/images/headera4.PNG" width="580px"/></center>
                <hr />
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Order Details</h4>
                </div>

                <div class="dataTable_wrapper">
                            <center><table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>

                                    <tr>
                                        <td>Order ID</td>
                                        <td><?php echo $order->order_id ?></td>
                                    </tr>
                                    <tr>
                                        <td>Order Date</td>
                                        <td><?php echo date('d/m/Y', strtotime($order->order_date)) ?></td>
                                   </tr>
                                    <tr>
                                        <td style="width: 208px;">Customer Name</td>
                                        <td><?php echo $order->firstname . " " . $order->lastname ?> 
                                   </tr>
                                    <tr>
                                        <td>Payment Method</td>
                                        <td><?php echo $order->payment_method ?></td>
                                    </tr>
                                    <tr>
                                        <td>Delivery Method</td>
                                        <td><?php echo $order->delivery_method ?></td>  </tr>

                            </table></center>
                        </div>


                <div class="modal-body">        
                    <table border="2" class="table table-striped container">
                        <tr class="txt_bold">
                            <td></td>
                            <td>Device</td>
                            <td>Condition</td>
                            <td>IMEI</td>
                            <td>Price</td><br />
                        </tr>

                        <?php
                        $total = 0;
                        foreach ($products as $product):
                            ?>

                            <tr>
                                <td><img src="<?php echo $product['image'] ?>" height="75" width="50"></td>
                                <td><?php echo $product['name'] ?></td>
                                <td><?php echo $product['condition'] ?></td>
                                <td><?php echo $product['imei'] ?></td>
                                <td><?php echo CURRENCY_SYMBOL.$product['price'] ?></td>
                            </tr>
                            <?php
                            $total += $product['price'];
                        endforeach;
                        ?>
                    </table>
                    <div style="float:right;"><b>Total <?php echo CURRENCY_SYMBOL.$total?></b></div>
                    <br />
                    <center><img src="http://www.webuyback.com.au/images/signa4.png" width="580px" /></center>
                </div>
                </div>

                <div class="modal-footer">
                <button type="button" class="btn btn-default" id="btnprint">Print</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
        </div>

    </div>
    <?php
endforeach;
?>

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }

   .modal-content {
        display:block;
}