CODEWITHSUNDEEP
cssajaxasp.net-ajaxprinting
Richard Ev
Richard Ev

Reputation: 54167

Print contents of a modal popup

I have an application that shows a list of items.

The user can click on an item and see its details in a modal popup (centered DIV, shown using JavaScript). I need to have a button on that popup that will allow the user to print out the contents of the modal popup only.

This is for an internal application that needs to work in IE7+ only. When the user clicks the print button on the modal popup the state of the item gets changed to "printed" (for internal business reasons...).

I am using ASP.NET and the ASP.NET AJAX Control Toolkit ModalPopupExtender, but I am guessing that the technique to achieve this will be browser-centric, and server technology agnostic.

Upvotes: 1

Views: 13274

Answers (4)

user764200
user764200

Reputation: 51

To render the popup contents with a different style (e.g. not centered, 100% width) I dynamically update the position of the _foregroundElement (the PopupControlID) and _backgroundElement (created by the popup extender) on print.

var basePrint = window.print;
window.print = function() {
  var popup = $find( '<%= [PopupExtenderID].ClientID %>' );
  popup._backgroundElement.style.position = 'static';
  popup._foregroundElement.style.position = 'static';
  popup._layout();
  basePrint();
  // Restore settings for display
  popup._backgroundElement.style.position = 'fixed';
  popup._foregroundElement.style.position = 'fixed';
  popup._layout();
  }

Note: Won't work with browser's print button.

Upvotes: 0

vsingh
vsingh

Reputation: 6779

Try this 

function PrintContent() {

var DocumentContainer = document.getElementById('nameofDiv');
var WindowObject = window.open("", "PrintWindow",
"width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
WindowObject.document.write();
WindowObject.document.write('<link rel="stylesheet" type="text/css" href="path-to-my-stylesheet.css">')
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}

This will print out the contents in another window using your stylesheets

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114437

You could add a 'noprint' class name to a div wrapping everything you do not wish to print.

If you also want the main page to be printable without the dialog you can add class name to the wrapper DIV when the user presses the PRINT button and remove the class name after.

@media print {
.noprint {
 display:none
}
}

Upvotes: 4

bchhun
bchhun

Reputation: 18484

You could redirect to a printable page that has the content of the modal popup. Make sure that page has window.print() in the load event. Once your user reaches that page, you could just flag that.

What would happen if the user gets there and cancel the print?

Upvotes: 0

Related Questions