Question

I am trying to showing one image in bootstrap modal, also that pop-up window have one print button, so i need to take the print of that image, which showing in pop-up window.

<script type="text/javascript">    
   function code(){    
     $("#qbody").html("<p align='center'><img 
     src='http://chart.apis.google.com/chart?
     cht=qr&chs=300x300&chl=code&chld=H|0'/></p>");  
   }  
</script>  
<div class="modal fade">
  <div class="modal-body" id="qbody">
   <a href='#' class='btn btn-primary pull-left'
   onClick='window.print();'>Save</a>"
  </div> 
</div> 

But here i click the save button that whole page will take as print, not taking that pop-up window image. How is that happening?

Answer 1

Use custom css for print media

@media print{
   body{
     visibility: hidden;
   }
  .to-print{
     visibility: visible;
     position: absolute;
     top: 0;
     left: 0;
   }
}

Now add class .to-print to div you want to print, in your case to img tag.

Check it out at jsfiddle (it is not using modal window, loaded directly)