Another solution
Here is a new solution based on Bennett McElwee answer in the same question as mentioned below.
Tested with IE 9 & 10, Opera 12.01, Google Chrome 22 and Firefox 15.0.
jsFiddle example
1.) Add this CSS to your site:
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
2.) Add my JavaScript function
function printElement(elem, append, delimiter) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
$printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
if (append !== true) {
$printSection.innerHTML = "";
}
else if (append === true) {
if (typeof (delimiter) === "string") {
$printSection.innerHTML += delimiter;
}
else if (typeof (delimiter) === "object") {
$printSection.appendChild(delimiter);
}
}
$printSection.appendChild(domClone);
}
You’re ready to print any element on your site!
Just call printElement() with your element(s) and execute window.print() when you’re finished.
Note:
If you want to modify the content before it is printed (and only in the print version), checkout this example (provided by waspina in the comments): http://jsfiddle.net/95ezN/121/
One could also use CSS in order to show the additional content in the print version (and only there).
Former solution
I think, you have to hide all other parts of the site via CSS.
It would be the best, to move all non-printable content into a separate DIV:
<body>
<div class="non-printable">
<!-- ... -->
</div>
<div class="printable">
<!-- Modal dialog comes here -->
</div>
</body>
And then in your CSS:
.printable { display: none; }
@media print
{
.non-printable { display: none; }
.printable { display: block; }
}
Credits go to Greg who has already answered a similar question: Print <div id=”printarea”></div> only?
There is one problem in using JavaScript: the user cannot see a preview – at least in Internet Explorer!