Printing a modal

6 years 2 months ago - 4 years 6 months ago #844 by maz
Printing a modal was created by maz
Been going round in circles trying to get this to work... then thought I'd ask a genius :)

I have created a bootstrap 'modal' with some content. I also placed a 'print' button on it. What I need is for it to print ONLY the Modal content. The problem is it always prints the 'whole' page.

I know its a bit off track, but i just don't know who to ask for advice. I would be so grateful if you could please advise me where I am going wrong and how I can put a print button on the modal so it ONLY prints the modal content and NOT the whole page.

The code I have been using is this:
<!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
 
    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
    <p>One fine body…</p>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" onClick="window.print()" value="Print This Modal">Print</button>
    </div>
    </div>

Its the standard modal code taken from bootstrap site.

Thank you.

Please Log in to join the conversation.

6 years 1 month ago #871 by maz
Replied by maz on topic Printing a modal
Any help on this please? Any advice would be appreciated.
Many thanks.

Please Log in to join the conversation.

6 years 1 month ago #873 by Adminv
Replied by Adminv on topic Printing a modal
Hi!

To be honest:
I have really no idea how you could bring together the Bootstrap modal and the Joomla print function...

Please Log in to join the conversation.

6 years 1 month ago - 6 years 1 month ago #878 by maz
Replied by maz on topic Printing a modal
Hi Holger

i came across these instructions here: groups.google.com/forum/#!topic/twitter-...overflow/znM1I3PC500

.. but I just cannot get the last step (3) where it says 'Just call printElement() with your element(s) and execute window.print() when you're finished.'.

I added the styles to the css stylesheet and also the javascript to the template. The only thing i am not sure about is what to put on the page itself.

STEP 1. I put this in the style.css
@media screen {
  #printSection {
      display: none;
  }
}
 
@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}
</style>

STEP 2. I put this js on the template page
<!--maz bof js for print modal. works with css  -->
  <script>
  function printElement(elem, append, delimiter) {
    var domClone = elem.cloneNode(true);
 
    var $printSection = document.getElementById("printSection");
 
    if (!$printSection) {
        var $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.appendChlid(delimiter);
        }
    }
 
    $printSection.appendChild(domClone);
}​
    </script>

STEP 3. This is the only part I am stuck with. I dont know which part of the html to change to call the print action. At the moment, the complete screen prints.
<!-- Modal -->
<div id="myModal" class="modal hide fade " tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
<button class="btn btn-primary" onClick="window.print()" value="Print This Page">Print</button>
</div>
</div>

Perhaps you could give me your thoughts please?

Please Log in to join the conversation.

5 years 8 months ago - 5 years 8 months ago #986 by Adminv
Replied by Adminv on topic Printing a modal
Please let us know if you solve this problem ?
If not please let us know.

Please Log in to join the conversation.

Time to create page: 0.151 seconds
Powered by Kunena Forum
Don't have an account yet? Register Now!

Sign in to your account