Last active
December 18, 2018 12:21
-
-
Save jacksonpires/8b6d9ce385a55a19479b97947fa5b71c to your computer and use it in GitHub Desktop.
Print Bootstrap Modal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** Print css **/ | |
@media print { | |
body.modalprinter * { | |
visibility: hidden; | |
} | |
body.modalprinter .modal-dialog.focused { | |
position: absolute; | |
padding: 0; | |
margin: 0; | |
left: 0; | |
top: 0; | |
} | |
body.modalprinter .modal-dialog.focused .modal-content { | |
border-width: 0; | |
} | |
body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title, | |
body.modalprinter .modal-dialog.focused .modal-content .modal-body, | |
body.modalprinter .modal-dialog.focused .modal-content .modal-body * { | |
visibility: visible; | |
width: 100%; | |
} | |
body.modalprinter .modal-dialog.focused .modal-content .modal-header, | |
body.modalprinter .modal-dialog.focused .modal-content .modal-body { | |
padding: 0; | |
width: 100%; | |
} | |
body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title { | |
margin-bottom: 20px; | |
} | |
} | |
/* Script JS */ | |
<script> | |
$().ready(function () { | |
$('.modal.printable').on('shown.bs.modal', function () { | |
$('.modal-dialog', this).addClass('focused'); | |
$('body').addClass('modalprinter'); | |
}).on('hidden.bs.modal', function () { | |
$('.modal-dialog', this).removeClass('focused'); | |
$('body').removeClass('modalprinter'); | |
}); | |
}); | |
</script> | |
/ * Modal Bootsrap */ | |
<div class="modal fade printable" id="doubtModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> | |
<div class="modal-dialog" role="document"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
<h4 class="modal-title" id="exampleModalLabel">Sobre o Sistema</h4> | |
</div> | |
<div class="modal-body"> | |
<div class="well well-lg"> | |
<%= Doubt.first.body_html.html_safe %> | |
</div> | |
</div> | |
<div class="modal-footer"> | |
<button type="button" class="btn btn-default" data-dismiss="modal"><%= t('buttons.close') %></button> | |
<button type="button" class="btn btn-primary" onclick="window.print();">Imprimir</button> | |
</div> | |
</div> | |
</div> | |
</div> |
For me the modal is printing twice! It's a short content. Any help to solve this issue?
Seems to work well, execept it wants to print the same modal content 5 times on a page, containing 10 modals
https://graenfaninn.landvernd.is/Thatttaka/Themu
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The problem with this resides on long content, it breaks on second page.