Twitter Bootstrap print Modal

Come sostitute dei fastidiosi pupup, ormai le finestre modali la fanno da padrone.

Spesso mi è capitato di dover stampre solo il suo contenuto, tralasciando tutto il resto della pagina.

Ma le finestre modali, in verità, sono solo una parte della pagina che viene visualizzata allo scatenarsi di un evento; quindi, in realtà, state sempre dentro alla stessa pagina, e non viene aperta una vera e propria finestra come nel caso dei popup.

Come fare quindi a stamparne il suo contenuto?

Vediamo un esempio con Twitter Bootstrap.

Prima di tutto alla pagina aggiungete questo 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;
        }

        body.modalprinter .modal-dialog.focused .modal-content .modal-header,
        body.modalprinter .modal-dialog.focused .modal-content .modal-body {
            padding: 0;
        }

        body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
            margin-bottom: 20px;
        }
    }

In pratica blocca la stampa della pagina dove si trova il modal.

Questo invece il modal, con un pò di Javascript al suo interno:

<div id="modal_print_articoli" class="modal fade printable autoprint">
    <script>
        $().ready(function () {
            $('.modal.printable').on('shown.bs.modal', function () {
                $('.modal-dialog', this).addClass('focused');
                $('body').addClass('modalprinter');
                if ($(this).hasClass('autoprint')) {
                    window.print();
                }
            }).on('hidden.bs.modal', function () {
                $('.modal-dialog', this).removeClass('focused');
                $('body').removeClass('modalprinter');
            });
        });
    </script>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                YOUR CONTENT HERE!!!
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
                <button type="button" class="btn btn-primary" onclick="window.print();">Stampa</button>
            </div>
        </div>
    </div>
</div>

Quel codice JS, aggiunge una classe al body (riferita al CSS per il blocco della stampa); poi avvia la stampa appena il modal è caricato.

Questa parte si può anche omettere, se vi da fastidio, perchè come vedete ho impostato l'avvio di stampa anche sul bottone in basso.

In chiusura di modal, viene ripristinata la situazione iniziale.

Enjoy!