Новая страница с печатью окна

Question

У меня есть таблица и два всплывающих окна, которые я хочу распечатать, когда вызывается действие. Проблема, с которой я столкнулась, заключается в том, что разрыв страницы в css не работает, и никакое другое решение, которое я пробовал, тоже работает. В настоящий момент два всплывающих окна отображаются поверх табличных данных, и я ищу их либо на новых страницах, либо один за другим.

HTML

<div class="printable"> 

<table class="table"> 
    <th>Option 1</th> 
    <th>Option 2</th> 
    <tr> 
     <td><input class="span6 text-center" type="text" id="cost1"></td> 
     <td><input class="span6 text-center" type="text" id="cost2"></td> 
    </tr> 
</table> 

    <div class="popup" data-popup="popup1"> 
     <p>Need to print this as well</p> 
    </div> 

    <div class="popup" data-popup="popup2"> 
     <p>Need to print this as well</p> 
    </div> 

    <input type="button" value="Print" class="btn btn-success" onclick="window.print();" /> 
</div> 

CSS

.popup { 
    width:100%; 
    height:100%; 
    display:none; 
    position:fixed; 
    top:0px; 
    left:0px; 
    background:rgba(0,0,0,0.75); 
} 

@media print { 
    body * { 
     visibility: hidden; 
     } 
    .printable * { 
     visibility: visible; 
    } 
    .popup { 
     display: block; 
    } 
} 

Answer 1

По w3c (см fixed части): https://www.w3.org/TR/CSS21/visuren.html#propdef-position

UAs не должен постраничное содержания стационарных ящиков.

Так position: fixed не постраничной, даже если вы установили top: 100% ко второму .popup.

И в вашем образце второй .popup является наложением первого.

Изменяя положение .popup «s к absolute и дать второй этот стиль:

.popup:nth-of-type(2) { 
    page-break-before: always; 
    top: 100%; 
} 

https://jsfiddle.net/fp2gkm17/