Skip to content

Instantly share code, notes, and snippets.

@labboy0276
Last active February 25, 2023 16:20
Show Gist options
  • Save labboy0276/b4319ae520105ac5fe7d to your computer and use it in GitHub Desktop.
Save labboy0276/b4319ae520105ac5fe7d to your computer and use it in GitHub Desktop.
Bootstrap Modal Print
How to print a Bootstrap Modal (this was for Drupal 7 site as a FYI):
Add this to the modal
<button type="button" class="btn btn-default print" onClick="window.print();return false">Print</button>
Create a JS file and do this:
( function($) {
$(document).ready(function(){
// Add Print Classes for Modal
$('.modal').on('shown.bs.modal',function() {
$('.modal,.modal-backdrop').addClass('toPrint');
$('body').addClass('non-print');
});
// Remove classes
$('.modal').on('hidden.bs.modal',function() {
$('.modal,.modal-backdrop').removeClass('toPrint');
$('body').removeClass('non-print');
});
});
})( jQuery );
CSS:
/** Print Sheet **/
NOTE: these were specific to this site, but you can use this to not show any of the surrounding containers.
Just doing a body or higher up .container would hide everything. So I had to pick and choose what not to show.
/** Print Sheet **/
@media only print, print {
body.non-print #product-nav,
body.non-print #product-content,
body.non-print #sales-forms-container,
body.non-print #tab-quote,
body.non-print #tab-upgrade,
body.non-print #tab-contact,
body.non-print #sales-form-phone,
body.non-print .product-jumbo-strech .bottom-wrapper,
body.non-print .panel-block-text,
body.non-print footer,
.modal-backdrop.toPrint {
display: none !important;
visibility: hidden !important;
}
.modal.toPrint {
position: relative;
overflow: hidden;
visibility:visible;
width: 100%;
font-size: 80%;
}
.modal.toPrint .nav .li {
visibility: hidden;
}
.modal.toPrint .nav .li.active {
visibility: visible;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment