Home/ Questions/Q 8488013
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T21:24:45+00:00

I’m developing a site using Bootstrap which has 28 modal windows with information on

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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!

    • 0