僅在打印預覽中顯示模態內容

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

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

Answer 2

為了顯示模態，您需要在模態外放置一個按鈕。

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

此外，如果您使用的是引導程序，請同時在您的標題中包含以下內容：

  <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 3

用 CSS 的@media控制它怎么樣？ 例如，

 @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>