1

I want to print the only content that is present inside the modal, When i press ctrl+p the modal and backside page keep merging. I need only content inside the model to print... Please share answers advance in thanks.

Siddhartha Narayanadasu
  • 137
  • 1
  • 12
  • Possible duplicate of [Print the contents of a DIV](https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div) –  Jul 07 '18 at 12:18
  • 2
    You can use CSS to achieve your goal. Use media queries for print and hide all other divs except modal's body. See here details about media queries https://developer.mozilla.org/en-US/docs/Web/CSS/@media – Răzvan Moldovan Jul 07 '18 at 12:20

1 Answers1

3

You can try something like the following:

<style type="text/css">
@media print {
  .modal_content_body {
    position: absolute;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;/* or set some fixed value like: 1200px;*/
  }
}
</style>

Here width & height are set 100% to hide the other contents on the page. If your content are to be compact, so that the contents do not get widened in full width, you can apply the width-height property on the parent component of the modal contents's holder component.

If you use media print feature to show the modal content only and hide everything else(like body or main wrapper) in the page, it might not work based on your html structure. For example - you are showing the modal content, hiding the body/wrapper - but the modal content itself inside the body/wrapper container. Here as the parent is hidden, so is the child(modal content).

In that case you need to place the modal's html outside the wrapper - and go for hiding the wrapper and showing the modal content.

For example:

<body>
  <div class="wrapper">
    ...
  </div>
  <div class="modal">
    ...
  </div>
</body>

<style type="text/css">
@media print {
  .wrapper {dosplay:none;}
}
</style>

But the following wont work:

<body>
  <div class="wrapper">
    ...
    <div class="modal">
      ...
    </div>
  </div>
</body>

<style type="text/css">
@media print {
  .wrapper {dosplay:none;}
  .modal {dosplay:block;}
}
</style>
Tanvir Ahmed
  • 483
  • 3
  • 10