Показывать модальное содержимое только при предварительном просмотре

Question

Я хочу напечатать модальное содержимое, нажав кнопку печати

<div id="pvmodal" class="modal fade"></div>

 <div class="modal-footer">
 <button type="button" class="btn btn-primary" id="printbtn" 
 class="printbtn"> Print</button>
 </div>

Answer 1

Чтобы указать модальное значение

, вам нужно поместить кнопку за пределами модального поля.

<button type="button" data-toggle="modal" data-target="#pvmodal">Open Modal</button>

Кроме того, если вы используете bootstrap, пожалуйста, включите их в заголовок:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Для получения дополнительной информации, проверьте здесь: https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Answer 2

Как насчет управления им с @media из CSS ?. например,

@media screen {
  .print {
    display:none;
  }
}

@media print{
  .print {
    display:block;
  }
}

<div>
  <div>you can see this</div>
  <div class="print">
  you can see this only in print preview
  </div>
  
</div>

Answer 3

$('#printbtn').click(function(){$('#pvmodal').modal('show')})