ANGULARJS Print Bootstrap Modal Content

When trying to print a modal dialog, we may not need to see the main layout content mixed with the modal content on the print out.  This is however the default behavior when we try to print a web page.

In order to print the modal dialog content, we need to hide the main layout and only make the dialog content visible. This can be achieved by adding print media styles which only affect the print out and not the screen media.  Let’s look at a printing a simple invoice example shown below:

Note that in this example, we have two actions/buttons:

CodeProject

Print Modal Dialog:  Prints out the modal dialog content only.    

                                                  

Normal Print: Prints out the entire web page.

For the Print Modal action, we add the print media styles to hide the entire content of the page. This allows us to prevent the layout elements to be visible in the print out. We also need to print the modal content. To do that, we add a style class (print-content) and attributes to the Bootstrap .modal class which allows us to override the default modal style. As a result, only the dialog content is shown on the print out.

We should note that this approach is not specific to AngularJS. It is a technique that can be used with any JS framework as the changes are specific to CSS classes and not the framework.

Thanks for reading.

Originally posted at ozkary.com