print modal window contnents only

Print the contents of the modal window only

by Joe Cisneros

HTML

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="printThis" class="modal-body">
                <ul>
                    <li>ListItem1</li>
                    <li>ListItem2</li>
                    <li>ListItem3</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" id="Print" class="btn btn-primary">Print</button>
            </div>
        </div>
    </div>
</div>

CSS

@media screen {
    #printSection {
        display: none;
    }
}
@media print {
    body * {
        visibility:hidden;
    }
    
    
    #printThis, #printThis *, #printSection, #printSection * {
        visibility:visible;
    }
    #printSection {
        position:absolute;
        left:0;
        top:0;
    }
}

JavaScript

document.getElementById("Print").onclick = function () {
	window.print();
    /* printElement(document.getElementById("printThis")) */;
};

function printElement(elem) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    $printSection.innerHTML = "";
    $printSection.appendChild(domClone);
    window.print();
}