Bootstrap Modal Remote

Demonstrates loading remote data into a Bootstrap Modal. SO: http://stackoverflow.com/q/12152101/570918

by Intesar Haider

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<h1>Don't Print</h1>

<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch modal</a>

<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 id="myModalLabel">Modal to print</h3>

    </div>
    <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="invoice-title">
                            <h3 class="pull-left">Booking ID: 000012345</h3>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-6 col-sm-6 col-xs-6">
                                <address class="text-left">
                                    <strong>Guest Information:</strong><br>
                                    Judy Hopps<br>
                                    <br>
                                    , ,                                 </address>
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                <address class="text-right">
                                    <strong>Company Details:</strong><br>
                                    Bookfull<br>
                                    514 Mill Street Suite F <br>
                                    Mount Pleasant, South Carolina, 29464                                </address>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
         ...

CSS

@media screen {
    #printSection {
        display: none;
    }
}
@media print {
    .modal-footer{
        display:none;
    }
    @page{
        size: A4;
    }

    .modal-body{
        padding: 0px;
    }

    html, body {
        border: 1px solid red;
        margin: 0 auto;
        padding: 0;
    }

    .modal-header{
        display:none;
    }
    .modal-content{
        background: red;
    }
    img { 
        height: 100%;
        display: none;
    }
     a[href]:after {
        content: " (" attr(href) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript"]:after {
        content: "";
    }
    @page{
        counter-increment: page;
        counter-reset: page 2;
    }
}

JavaScript

$('#printButton').on('click', function () {
    if ($('.modal').is(':visible')) {
        var modalId = $(event.target).closest('.modal').attr('id');
        $('body').css('visibility', 'hidden');
        $("#" + modalId).css('visibility', 'visible');
        $('#' + modalId).removeClass('modal');
        window.print();
        $('body').css('visibility', 'visible');
        $('#' + modalId).addClass('modal');
    } else {
        window.print();
    }
});