Распечатать содержимое Colorbox

09.08.2015

1) Подключаем Colorbox

<script type="text/javascript">
$(document).ready(function(){
 $(".pricing").colorbox({width:"733px", height:"699px", iframe:false, open:true, overlayClose:true, opacity:.5, initialWidth:"300px", initialHeight:"100px", transition:"elastic", speed:350, close:"Close", photo:false, inline:true,  href:"#price_report"});
});
</script>

2) Определяем, что у нас будет распечатываться

<div style='display: none'>
  <div id='price_report' class='pricing'>

<script type="text/javascript">
//<!--

function ClickHereToPrint(){
    try{ 
        var oIframe = document.getElementById('ifrmPrint');
        var oContent = document.getElementById('pricingPrintArea').innerHTML;
        var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
        if (oDoc.document) oDoc = oDoc.document;
        oDoc.write("<html><head><title>My Printable Pricing Report!</title>");
        oDoc.write("<link rel='stylesheet' href='link-to-my-styles/style.css' type='text/css' />");
        oDoc.write("</head></body><body onload='this.focus(); this.print();' style='text-align: left; font-size: 8pt; width: 432pt;'>");
        oDoc.write("<h3>My Pricing Report</h3>");
        oDoc.write(oContent + "</body></html>");        
        oDoc.close();       
    }
    catch(e){
        self.print();
    }
}

//-->
</script>

<iframe id='ifrmPrint' src='#' style="width:0pt; height:0pt; border: none;"></iframe>

<div id="pricingPrintArea">

   <div class="myreport">
       <p>Hello, I am a pricing report!</p>
   </div>
</div>

</div>
</div>

3) Добавляем кнопку “Распечатать”

<div id="print_btn">
<a href="#" onclick="ClickHereToPrint();" style="cursor: pointer;">
<span class="print_btn">
    Click Here To Print This Report!
</span>
</a>
</div>  

Все!

#JQuery‏‎