Twitter Bootstrap Print content of modal window

Question

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     lt  -- firecell panel  amp  radio hub -- gt              lt div class  modal hide fade  id  fcpanelhub  gt                 lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  gt X lt  button gt                   lt h3 gt 5000 Control Panel  amp  Radio Hub lt  h3 gt                 lt  div gt                 lt div class  modal-body  gt                   lt img src     site img firecell firecell-panel-info-1 png  alt     gt  lt hr  gt                   lt img src     site img firecell firecell-panel-info-2 png  alt     gt  lt hr  gt                   lt img src     site img firecell firecell-radio-hub-info-1 png  alt     gt  lt hr  gt                   lt img src     site img firecell firecell-radio-hub-info-2 png  alt     gt                 lt  div gt                 lt div class  modal-footer  gt                   lt a href     class  btn  data-dismiss  modal  gt Close lt  a gt                 lt  div gt                  lt  div gt    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

User · Answer

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

User · Answer

I just use a bit of jQuery javascript   html    lt h1 gt Don t Print lt  h1 gt    lt a data-target   myModal  role  button  class  btn  data-toggle  modal  gt Launch modal lt  a gt    lt div class  modal fade hide  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel       aria-hidden  true  gt     lt div class  modal-header  gt       lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt        lt h3 id  myModalLabel  gt Modal to print lt  h3 gt     lt  div gt     lt div class  modal-body  gt       lt p gt Print Me lt  p gt     lt  div gt     lt div class  modal-footer  gt       lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt       lt button class  btn btn-primary  id  printButton  gt Print lt  button gt     lt  div gt   lt  div gt    js       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                here is the fiddle

User · Answer

I was facing two issues  Issue 1   all fields were coming one after other and Issue 2   white space at the bottom of the page when used to print from popup   I Resolved this by  making display none to all body   elements most of them go for visibility hidden which creates space so avoid visibility hidden       media print           body                display none          width auto          height auto          margin 0px padding 0px                      printSection   printSection                 display inline-block important                     printSection               position absolute              left 0              top 0                margin 0px               page-break-before  none              page-break-after  none              page-break-inside  avoid                   printSection  form-group         width 100  important        float left important        page-break-after  avoid         printSection label          float left important          width 200px important          display inline-block important            printSection  form-control search-input          float left important          width 200px important          display  inline-block important

User · Answer

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     lt style type  text css  gt      media screen            printSection              display  none                      media print           body  gt    not  printSection               display  none                     printSection   printSection                 visibility  visible                     printSection               position absolute              left 0              top 0                  lt  style gt    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  lt div id printarea gt  lt  div gt  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  amp  body and excludes the footer  where the buttons were located     lt div class  modal-content  gt       lt div id  print-me  gt   lt  -- This is the div that is cloned and printed -- gt           lt div class  modal-header  gt               lt  -- HEADER CONTENT -- gt           lt  div gt           lt div class  modal-body  gt                lt  -- BODY CONTENT -- gt           lt  div gt       lt  div gt       lt div class  modal-footer  gt                                    lt  -- This is where I specify the div to print -- gt           lt button type  button  class  btn btn-default  onclick  printDiv  print-me    gt Print lt  button gt           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt       lt  div gt   lt  div gt    I hope that helps someone

User · Answer

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       lt div id  printSection  gt  lt  div gt                   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

User · Answer

x000D   x000D   media print  x000D   body  x000D    visibility  hidden     no print   x000D     x000D    print  x000D     x000D    visibility visible    print   x000D     x000D    x000D   lt body gt  x000D     lt div class  noprint  gt   lt  ---no print--- gt  x000D     lt div class  noprint  gt   lt  ---no print--- gt  x000D     lt div class  print  gt     lt  ---print--- gt  x000D     lt div class  print  gt     lt  ---print--- gt  x000D   x000D   x000D   lt  body gt  x000D   x000D   x000D

User · Answer

Another solution  Here is a new solution based on Bennett McElwee answer in the same question as mentioned below   Tested with IE 9  amp  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    lt body gt     lt div class  non-printable  gt       lt  --     -- gt     lt  div gt      lt div class  printable  gt       lt  -- Modal dialog comes here -- gt     lt  div gt   lt  body gt    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  lt div id  quot printarea quot  gt  lt  div gt  only   There is one problem in using JavaScript  the user cannot see a preview - at least in Internet Explorer

User · Answer

Heres a solution with no Javascript or plugin - just some css and one extra class in the markup  This solutions uses the fact that BootStrap adds a class to the body when a dialog is open  We use this class to then hide the body  and print only the dialog   To ensure we can determine the main body of the page we need to contain everything within the main page content in a div - I ve used id  mainContent   Sample Page layout below - with a main page and two dialogs   lt body gt    lt div class  container body-content  gt      lt div id  mainContent  gt         main page stuff         lt  div gt     lt  -- Dialog One -- gt     lt div class  modal fade in  gt      lt div class  modal-dialog  gt       lt div class  modal-content  gt                     lt  div gt      lt  div gt     lt  div gt      lt  -- Dialog Two -- gt     lt div class  modal fade in  gt      lt div class  modal-dialog  gt       lt div class  modal-content  gt                     lt  div gt      lt  div gt     lt  div gt     lt  div gt   lt  body gt      Then in our CSS print media queries  I use display  none to hide everything I don t want displayed - ie the mainContent when a dialog is open  I also use a specific class noPrint to be used on any parts of the page that should not be displayed - say action buttons  Here I am also hiding the headers and footers  You may need to tweak it to get exactly want you want    media print       header   footer  footer           display  none                hide main content when dialog open        body modal-open div container body-content div mainContent           display  none              noPrint           display  none

User · Answer

I would suggest you try this jQuery plugin print element  It can let you just print the element you selected

User · Answer

you can download printThis lib from this source  https   github com jasonday printThis blob 0a7f799693af8a8303bf0b8df0efc80c2694af81 printThis js and include it into your html page   Call the following jquery to print all the content including the content that is not viewable  You may include your css files in an array if you have multiple css files       modalDiv   printThis        debug  false                    importCSS  true                   importStyle  true               printContainer  true             loadCSS      css style css        pageTitle   My Modal                    removeInline  false              printDelay  333                  header  null                   formValues  true

[javascript] Twitter Bootstrap: Print content of modal window

Examples related to javascript

Examples related to printing

Examples related to twitter-bootstrap

[javascript] Twitter Bootstrap: Print content of modal window

Examples related to javascript

Examples related to printing

Examples related to twitter-bootstrap

Examples related to modal-dialog