Menu
I'm developing a site using Bootstrap which has 28 modal windows with information on different products. I want to be able to print the information in an open modal window. Each window has an id.
<!-- firecell panel & radio hub --> <div class="modal hide fade" id="fcpanelhub"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">X</button> <h3>5000 Control Panel & Radio Hub</h3> </div> <div class="modal-body"> <img src="../site/img/firecell/firecell-panel-info-1.png" alt=""/><hr/> <img src="../site/img/firecell/firecell-panel-info-2.png" alt=""/><hr/> <img src="../site/img/firecell/firecell-radio-hub-info-1.png" alt=""/><hr/> <img src="../site/img/firecell/firecell-radio-hub-info-2.png" alt=""/> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> </div> </div> So if I add in a new button in modal-footer - 'print', and it's clicked I want that modal to print. Would I be right in saying javascript would be used? If so, how do I tell javascript to print only the open modal, and not the others?
All help appreciated.
435
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
On each of your <tr> 's add a data attribute for id (i.e. data-id ) with the corresponding id value and specify a data-target , which is a selector you specify, so that when clicked, bootstrap will select that element as modal dialog and show it.
Here is a new solution based on Bennett McElwee answer in the same question as mentioned below.
Tested with IE 9 & 10, Opera 12.01, Google Chrome 22 and Firefox 15.0.
jsFiddle example
@media screen { #printSection { display: none; } } @media print { body * { visibility:hidden; } #printSection, #printSection * { visibility:visible; } #printSection { position:absolute; left:0; top:0; } } function printElement(elem, append, delimiter) { var domClone = elem.cloneNode(true); var $printSection = document.getElementById("printSection"); if (!$printSection) { $printSection = document.createElement("div"); $printSection.id = "printSection"; document.body.appendChild($printSection); } if (append !== true) { $printSection.innerHTML = ""; } else if (append === true) { if (typeof (delimiter) === "string") { $printSection.innerHTML += delimiter; } else if (typeof (delimiter) === "object") { $printSection.appendChild(delimiter); } } $printSection.appendChild(domClone); } You're ready to print any element on your site!
Just call printElement() with your element(s) and execute window.print() when you're finished.
Note: If you want to modify the content before it is printed (and only in the print version), checkout this example (provided by waspina in the comments): http://jsfiddle.net/95ezN/121/
One could also use CSS in order to show the additional content in the print version (and only there).
I think, you have to hide all other parts of the site via CSS.
It would be the best, to move all non-printable content into a separate DIV:
<body> <div class="non-printable"> <!-- ... --> </div> <div class="printable"> <!-- Modal dialog comes here --> </div> </body> And then in your CSS:
.printable { display: none; } @media print { .non-printable { display: none; } .printable { display: block; } } Credits go to Greg who has already answered a similar question: Print <div id="printarea"></div> only?
There is one problem in using JavaScript: the user cannot see a preview - at least in Internet Explorer!
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
