是否可以将多个模态中的多个打印按钮绑定到每个模态中的特定 div？

Question

我正在通过具有 table 信息的基础 5 框架处理一个页面，每个信息都有一个 link 来调出一个特定模式，其中包含关于该特定行的详细信息.我对每个模式中包含的 div 有一个 "print this information" 按钮感兴趣。我的代码类似于以下内容：

<div id="detailModal1">
   <a href="javascript:window.print()" class="button"></i>Print Modal 1 Info</a>
   <div id="printableInfo1">Modal 1 information here</div>
</div>


<div id="detailModal2">
   <a href="javascript:window.print()" class="button"></i>Print Modal 2 Info</a>
   <div id="printableInfo2">Modal 2 information here</div>
</div>

<div id="detailModal3">
   <a href="javascript:window.print()" class="button"></i>Print Modal 3 Info</a>
   <div id="printableInfo2">Modal 3 information here</div>
</div>

希望这足够具体，感谢您的帮助。谢谢！

Answer 1

您可以使用 @media print css 查询选择器指定打印页面上应显示的内容。

在下面的示例中，我隐藏了打印页面上的所有内容，然后在用户单击按钮时应用 class print-content。

<script type="text/javascript" src="https://code.jquery.com/jquery-git2.min.js"></script>

<style>
    @media print {
        html body * {
            display: none;
        }
        .print-content {
            display: block !important;
        }
        .print-content * {
            display: block !important;
        }
    }
</style>


<div id="detailModal1">
    <a href="#" class="button print-button"></i>Print Modal 1 Info</a>
    <div id="printableInfo1">Modal 1 information here</div>
</div>
<div id="detailModal2" class="print">
    <a href="#" class="button print-button"></i>Print Modal 2 Info</a>
    <div id="printableInfo2">Modal 2 information here</div>
</div>
<div id="detailModal3">
    <a href="#" class="button print-button"></i>Print Modal 3 Info</a>
    <div id="printableInfo2">Modal 3 information here</div>
</div>

<script>

    $('.print-button').click(function(e) {
        var printContainer = $(e.target).parent();
        printContainer.addClass('print-content')
        window.print()
        printContainer.removeClass('print-content')
    })

</script>

是否可以将多个模态中的多个打印按钮绑定到每个模态中的特定 div？

Is it possible to bind multiple print buttons in multiple modals to a specific div in each modal?

html

javascript

css

jquery

zurb-foundation