Twitter Bootstrap: Print content of modal window

bootstrap: print entire modal
print a modal window not the rest of the page
how to print only popup window with javascript
print kendo window content
bootstrap modal
customize window print
window print pdf
window print save as pdf jquery

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.

Another solution

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

1.) Add this CSS to your site:
@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}
2.) Add my JavaScript function
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).


Former solution

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!

How do I print the entire bootstrap modal where content in modal , I have tried every piece of code on the following page and none of them print the entire modal. Twitter Bootstrap: Print content of modal window. 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. &…

I would suggest you try this jQuery plugin print element

It can let you just print the element you selected.

Printing a modal box - Ezekiel Kigbo, I really enjoy working with twitter bootstrap, but one thing I find a bit annoying, the content in the modal box into your printable div before firing the window print​  Twitter Bootstrap Modal are created using a custom Jquery Plugin. It may be used to create modal windows to enrich user experience or to add functionality to users. You may use popover and tooltips within Modals. In this tutorial, it is discussed how to create Modal windows using Twitter Bootstrap with several examples and explanations.

With the currently accepted solution you cannot print the page which contains the dialog itself anymore. Here's a much more dynamic solution:

JavaScript:

$().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');
    });
});

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;
    }
}

Example:

<div class="modal fade printable autoprint">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="window.print();">Print</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

javascript Twitter Bootstrap: Print content of modal window?, $('#printButton').on('click', function () { if ($('.modal').is(':visible')) { var modalId = $(​event.target).closest('.modal').attr('id'); $('body').css('visibility', 'hidden'); $("#" +  Loading Content in Modal via Ajax. You can also load remote content inside the Bootstrap modal via Ajax. In the following example content inside the modal body will be inserted from a remote file upon activation using the jQuery load() method and Bootstrap show.bs.modal event.

Here's an option using a JQuery extension I made based on the code by waspinator in the comments of the accepted answer:

jQuery.fn.extend({
    printElem: function() {
        var cloned = this.clone();
        var printSection = $('#printSection');
        if (printSection.length == 0) {
            printSection = $('<div id="printSection"></div>')
            $('body').append(printSection);
        }
        printSection.append(cloned);
        var toggleBody = $('body *:visible');
        toggleBody.hide();
        $('#printSection, #printSection *').show();
        window.print();
        printSection.remove();
        toggleBody.show();
    }
});

$(document).ready(function(){
    $(document).on('click', '#btnPrint', function(){
        $('.printMe').printElem();
    });
});

JSFiddle: http://jsfiddle.net/95ezN/1227/

This can be useful if you don't want to have this applied to every single print and just do it on your custom print button (which was my case).

Print Modal, <h1>Bootstrap Modal Example</h1>. 4 <div id="MyModal" class="modal fade" tabindex="-1" role="dialog" 12. 13. <!-- Modal Content: begins -->. 14. Twitter Bootstrap: Print content of modal window (6) Another solution Here is a new solution based on Bennett McElwee answer in the same question as mentioned below.

This is a revised solution that will also work for modal windows rendered using a Grails template, where you can have the same modal template called multiple times (with different values) in the same body. This thread helped me immensely, so I thought I'd share it in case other Grails users found their way here.

For those who are curious, the accepted solution didn't work for me because I am rendering a table; each row has a button that opens a modal window with more details about the record. This led to multiple printSection divs being created and printed on top of each other. Therefore I had to revise the js to clean up the div after it was done printing.

CSS

I added this CSS directly to my modal gsp, but adding it to the parent has the same effect.

<style type="text/css">
   @media screen {
        #printSection {
           display: none;
        }
   }

   @media print {
        body > *:not(#printSection) {
           display: none;
        }
        #printSection, #printSection * {
            visibility: visible;
        }
        #printSection {
            position:absolute;
            left:0;
            top:0;
        }
   }
</style>

Adding it to the site-wide CSS killed the print functionality in other parts of the site. I got this from ComFreak's accepted answer (based on Bennett McElwee answer), but it is revised using ':not' functionality from fanfavorite's answer on Print <div id=printarea></div> only? . I opted for 'display' rather than 'visibility' because my invisible body content was creating extra blank pages, which was unacceptable to my users.

js

And this to my javascript, revised from ComFreak's accepted answer to this question.

function printDiv(div) {    
    // Create and insert new print section
    var elem = document.getElementById(div);
    var domClone = elem.cloneNode(true);
    var $printSection = document.createElement("div");
    $printSection.id = "printSection";
    $printSection.appendChild(domClone);
    document.body.insertBefore($printSection, document.body.firstChild);

    window.print(); 

    // Clean up print section for future use
    var oldElem = document.getElementById("printSection");
    if (oldElem != null) { oldElem.parentNode.removeChild(oldElem); } 
                          //oldElem.remove() not supported by IE

    return true;
}

I had no need for appending elements, so I removed that aspect and changed the function to specifically print a div.

HTML (gsp)

And the modal template. This prints the modal header & body and excludes the footer, where the buttons were located.

<div class="modal-content">
    <div id="print-me"> <!-- This is the div that is cloned and printed -->
        <div class="modal-header">
            <!-- HEADER CONTENT -->
        </div>
        <div class="modal-body">
             <!-- BODY CONTENT -->
        </div>
    </div>
    <div class="modal-footer">
                                 <!-- This is where I specify the div to print -->
        <button type="button" class="btn btn-default" onclick="printDiv('print-me')">Print</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</div>

I hope that helps someone!

Modal · Bootstrap, Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user  Sometimes we require to open a form or display information that opens up as modal windows, I will show you an easy way to do it using twitter bootstrap modals.

Javascript · Bootstrap, Modals are streamlined, but flexible, dialog prompts with the minimum required If a remote url is provided, content will be loaded via jQuery's load method and banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. If there is opened bootstrap modal window, will be printed content of modal (it can be more than one page), in other case content of window. The problem is that the user has to scroll down to view all of the content within the modal body. However, when I print the modal the only part that is printed is the part that is viewable.

Printing a modal - Support & community forums, I have created a bootstrap 'modal' with some content. onClick="window.print()" value="Print This Modal">Print</button> </div> </div> i came across these instructions here: groups.google.com/forum/#!topic/twitter-overflow/​znM1I3PC500 Bootstrap - Modal Plugin - A modal is a child window that is layered over its parent window. Typically, the purpose is to display content from a separate source that can have some interac

Print Bootstrap Modal · GitHub, Print css **/ body.modalprinter .modal-dialog.focused .modal-content .modal-​header class="btn btn-primary" onclick="window.print();">Imprimir</button>. The .modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it. The .close class styles the close button, and the .modal-title class styles the header with a proper line-height.

Comments
  • I had no end of trouble with JS-based solutions. Here is a CSS-only solution that worked pretty well for me with Bootstrap 4 Alpha. Tested in Chrome, FF, IE, Edge. gist.github.com/anonymous/2d81209429ae4240d1e9711cc5f86c99
  • But what if you have a modal popup with printable area over the original printable area ?
  • @MattSull87 I've added another solution - this should work better! Here is an example: jsfiddle.net/95ezN/1
  • @waspinator My "print" element (the element you supply to printElement()) ands its children are nothing special. Just use getElementById() or querySelector[All]().
  • @waspinator Call printElement(yourContainer);, modify your child element and eventually call window.print(). printElement() only prepares the printing process, but it does not trigger the print itself.
  • @BennettDill You could add a class to <body> via JavaScript if the modal is currently shown: if (modalShown) { body.classList.add('printModal'); }. Then, you add body.printModal to the CSS rules, so they only take effect when you're actually printing the modal dialog.
  • The sample on the website does not work for me with IE 10 (Windows 8 RTM).
  • Really ? I haven't tried IE10 yet, but it sounds weird that it doesn't work with IE10. I used it on IE7-9 without problem. Do you try it on other browser to make sure you didn't miss something else ?
  • Okay, it works fine now! That was because GitHub does not send correct MIME types and IE 10 then blocks the script. Working jsFiddle here.
  • This is IMHO the best solution with the less hassle and code addition. Just incluse this file code.jquery.com/jquery-migrate-1.0.0.js after your javascript to avoid browser errors.