Making a lightbox support printing on web page

问题

I know the idea is to use a separate stylesheet for printing that hides everything other than the lightbox when the user clicks the print button on the lightbox.

It sounds easy but there are always some obstacles. So I would like to know if there is any working example that supports all major browsers.

I searched in google and found many lightbox but none of them has a print button built-in.

回答1:

I suggest you take a look at this article http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm

It works by temporarily creating an iframe, which can not be seen by the user, and quickly put all stuff to print into it (for example just a div and its contents). Then the content of the iframe is printed.

By the way, the stylesheet-method maybe considered as "way to go" but has a couple of cross-browser issues, from my experience.

edit: actually, this looks like what you are searching for http://plugins.jquery.com/project/jqPrint

回答2:

Create a new CSS document where you hide everything except the lightbox-div. Include that style sheet in your document with the attribute media="print"

something like

<link rel="stylesheet" href="/stylesheets/print.css"
    type="text/css" media="print" /> 

来源：https://stackoverflow.com/questions/2801259/making-a-lightbox-support-printing-on-web-page