Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

124
Visualizações
Mozilla Firefox printing Modal data along with the div that is to be printed

```
<div class="maindiv></div>
<div class="printablediv"></div>


function printData()
{
    $('#ProductIdModal').modal('hide');
    $(".maindiv").css('display','none');
    $(".Printablediv").css('display','block');
    $('.modal-backdrop').remove();
    window.print();
}


window.addEventListener("afterprint", myFunction);
function myFunction() {
    $(".maindiv").css('display','block');
  $(".Printablediv").css('display','none');
}

```

I have a written a function to print a div on Ajax success named printData(). Ajax call is made from a button which is on the modal named ProductModal

The print preview I get in chrome is fine but the modal gets displayed in mozilla firefox below the div.

Print Preview in chrome : enter image description here

Print Preview in mozilla : enter image description here

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Try using a print media query. For your case, I'm not sure if you need to apply the styles to the page or the modal.

These CSS styles are automatically applied only when printing, even through the browser. You can change the style or hide things.

/* print styles. put these at the end of your css. */
@media print {
    /* some of yours, copied from the js function: */
    .modal                      { display: none; }
    .maindiv                    { display: none; }
    .Printablediv               { display: block; }

    /* other. */
    *                           { color:#333; }
    html                        { height:auto; }
    .otherThing                 { font-size: 20pt; }
}

Hope that works.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda