Preview Page In A Modal Popup Before Printing - print-preview.js
File Size: | 11.2 KB |
---|---|
Views Total: | 1907 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery-powered custom print preview plugin that allows the user to preview the page with a print stylesheet in a modal popup before printing.
How to use it:
1. Include jQueyr library and the print-preview plugin's files on the page.
<link rel="stylesheet" href="/path/to/src/print-preview.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/src/jquery.print-preview.js"></script>
2. Add a print preview link to your webpage.
$(function(){ $('body').prepend('<a class="print-preview">Print This Page</a>'); $('a.print-preview').printPreview(); });
3. Load the print stylesheeet in your document. That's it.
<link rel="stylesheet" href="css/print.css" media="print" />
4. Customize the print preview link.
a.print-preview { background: url(images/icon-print-preview.png) no-repeat 0 0; cursor: pointer; display: block; margin: 0 0 20px; padding: 0 0 0 35px; line-height: 20px; }
This awesome jQuery plugin is developed by adoline. For more Advanced Usages, please check the demo page or visit the official website.