Twitter的引导：模态窗口的打印内容(Twitter Bootstrap: Print cont

2019-06-17 22:27发布

站内文章 / 前沿技术

18 0

冷血范

女 | 书童

私信

我正在开发使用引导它有28个不同产品的信息模态窗口的站点。我希望能够打印的信息在一个开放的模式窗口。每个窗口都有一个id 。

<!-- firecell panel & radio hub -->
           <div class="modal hide fade" id="fcpanelhub">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">X</button>
                <h3>5000 Control Panel & Radio Hub</h3>
              </div>
              <div class="modal-body">
                <img src="../site/img/firecell/firecell-panel-info-1.png" alt=""/><hr/>
                <img src="../site/img/firecell/firecell-panel-info-2.png" alt=""/><hr/>
                <img src="../site/img/firecell/firecell-radio-hub-info-1.png" alt=""/><hr/>
                <img src="../site/img/firecell/firecell-radio-hub-info-2.png" alt=""/>
              </div>
              <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">Close</a>
              </div>    
           </div>

所以，如果我在一个新的按钮添加在modal-footer - “打印”，它的点击我想要的模式进行打印。我会说错的JavaScript会使用吗？如果是这样，我怎么告诉JavaScript来打印只开放模式，而不是别人？

所有的帮助表示赞赏。

Answer 1:

另一种解决方案

这是基于一种新的解决方案贝内特麦克尔威答案在同样的问题如下所述。

测试了IE 9和10，歌剧12.01，谷歌浏览器22和Firefox 15.0。
例如的jsfiddle

1）这个CSS添加到您的网站：

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

2）加入我的JavaScript函数

function printElement(elem, append, delimiter) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    if (append !== true) {
        $printSection.innerHTML = "";
    }

    else if (append === true) {
        if (typeof (delimiter) === "string") {
            $printSection.innerHTML += delimiter;
        }
        else if (typeof (delimiter) === "object") {
            $printSection.appendChild(delimiter);
        }
    }

    $printSection.appendChild(domClone);
}

你准备打印网站上的任何元素！
只需拨打printElement()与你的元素（S）和执行window.print()时，你就完蛋了。

注意：如果你想修改它打印（只有在打印版）之前的内容，结帐这个例子（由waspina在评论中提供）： http://jsfiddle.net/95ezN/121/

人们还可以以显示在打印版本的附加内容（只有那里）使用CSS。

前者解决方案

我想，你必须通过CSS隐藏网站的其他部分。

这将是最好的，所有非打印的内容移动到一个单独的DIV ：

<body>
  <div class="non-printable">
    <!-- ... -->
  </div>

  <div class="printable">
    <!-- Modal dialog comes here -->
  </div>
</body>

然后在你的CSS：

.printable { display: none; }

@media print
{
    .non-printable { display: none; }
    .printable { display: block; }
}

积分去格雷格谁已经回答了类似的问题：打印<DIV ID =“printArea中”> </ DIV>只？

有一个在使用JavaScript的一个问题 ：用户无法看到预览-至少在Internet Explorer！

Answer 2:

我建议你试试这个jQuery插件打印元

它可以让你只打印你所选择的元素。

Answer 3:

随着目前公认的解决方案，您不能打印包含对话框本身了页面。这里有一个更加动态的解决方案：

JavaScript的：

$().ready(function () {
    $('.modal.printable').on('shown.bs.modal', function () {
        $('.modal-dialog', this).addClass('focused');
        $('body').addClass('modalprinter');

        if ($(this).hasClass('autoprint')) {
            window.print();
        }
    }).on('hidden.bs.modal', function () {
        $('.modal-dialog', this).removeClass('focused');
        $('body').removeClass('modalprinter');
    });
});

CSS：

@media print {
    body.modalprinter * {
        visibility: hidden;
    }

    body.modalprinter .modal-dialog.focused {
        position: absolute;
        padding: 0;
        margin: 0;
        left: 0;
        top: 0;
    }

    body.modalprinter .modal-dialog.focused .modal-content {
        border-width: 0;
    }

    body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title,
    body.modalprinter .modal-dialog.focused .modal-content .modal-body,
    body.modalprinter .modal-dialog.focused .modal-content .modal-body * {
        visibility: visible;
    }

    body.modalprinter .modal-dialog.focused .modal-content .modal-header,
    body.modalprinter .modal-dialog.focused .modal-content .modal-body {
        padding: 0;
    }

    body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
        margin-bottom: 20px;
    }
}

例：

<div class="modal fade printable autoprint">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="window.print();">Print</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 4:

下面是使用jQuery的扩展我根据在接受答案的评论waspinator代码所做的选项：

jQuery.fn.extend({
    printElem: function() {
        var cloned = this.clone();
        var printSection = $('#printSection');
        if (printSection.length == 0) {
            printSection = $('<div id="printSection"></div>')
            $('body').append(printSection);
        }
        printSection.append(cloned);
        var toggleBody = $('body *:visible');
        toggleBody.hide();
        $('#printSection, #printSection *').show();
        window.print();
        printSection.remove();
        toggleBody.show();
    }
});

$(document).ready(function(){
    $(document).on('click', '#btnPrint', function(){
        $('.printMe').printElem();
    });
});

的jsfiddle： http://jsfiddle.net/95ezN/1227/

如果你不希望有这种适用于每一个打印，只是做你的自定义打印按钮（这是我的情况），这可能是有用的。

Answer 5:

这是一个修改后的解决方案，也将使用一个Grails模板，在那里你可以在同一个身体多次调用（使用不同的值）相同的模式模板渲染模式窗口工作。这个线程帮助我极大的，所以我想我会的情况下，其他Grails用户共享在这里找到自己的方式。

对于那些谁是好奇，接受的解决方案并没有为我，因为我渲染表工作; 每一行都有有关记录的详细信息打开一个模式窗口的按钮。这导致了多个printSection的div被创建并打印在彼此的顶部。因此，我不得不修改JS清理DIV它已完成打印后。

CSS

我直接添加这个CSS到我的模式GSP，而是将它添加到父有同样的效果。

<style type="text/css">
   @media screen {
        #printSection {
           display: none;
        }
   }

   @media print {
        body > *:not(#printSection) {
           display: none;
        }
        #printSection, #printSection * {
            visibility: visible;
        }
        #printSection {
            position:absolute;
            left:0;
            top:0;
        }
   }
</style>

它添加到站点范围内的CSS打死在网站的其他部分的打印功能。我得到这个从ComFreak的接受的答案（基于贝内特麦克尔威答案），但它使用修订后的‘：没有’从功能fanfavorite的答案在“ 打印<DIV ID = printArea中> </ DIV>只？。我选择了“显示”而不是“知名度”，因为我看不见的身体含量建立额外的空白页，这是不能接受的我的用户。

JS

这对我的javascript，从修订ComFreak的接受了这个问题的答案。

function printDiv(div) {    
    // Create and insert new print section
    var elem = document.getElementById(div);
    var domClone = elem.cloneNode(true);
    var $printSection = document.createElement("div");
    $printSection.id = "printSection";
    $printSection.appendChild(domClone);
    document.body.insertBefore($printSection, document.body.firstChild);

    window.print(); 

    // Clean up print section for future use
    var oldElem = document.getElementById("printSection");
    if (oldElem != null) { oldElem.parentNode.removeChild(oldElem); } 
                          //oldElem.remove() not supported by IE

    return true;
}

我没有必要附加元素，所以我删除这方面，改变了功能，特别是打印一个div。

HTML（GSP）

和模态模板。这将打印模态报头体和排除了页脚，其中所述按钮均位于。

<div class="modal-content">
    <div id="print-me"> <!-- This is the div that is cloned and printed -->
        <div class="modal-header">
            <!-- HEADER CONTENT -->
        </div>
        <div class="modal-body">
             <!-- BODY CONTENT -->
        </div>
    </div>
    <div class="modal-footer">
                                 <!-- This is where I specify the div to print -->
        <button type="button" class="btn btn-default" onclick="printDiv('print-me')">Print</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</div>

我希望可以帮助别人！

Answer 6:

我只是用了一下的jQuery / JavaScript代码：

HTML：

<h1>Don't Print</h1>

<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch modal</a>

<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"      aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 id="myModalLabel">Modal to print</h3>
  </div>
  <div class="modal-body">
    <p>Print Me</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" id="printButton">Print</button>
  </div>
</div>

JS：

$('#printButton').on('click', function () {
    if ($('.modal').is(':visible')) {
        var modalId = $(event.target).closest('.modal').attr('id');
        $('body').css('visibility', 'hidden');
        $("#" + modalId).css('visibility', 'visible');
        $('#' + modalId).removeClass('modal');
        window.print();
        $('body').css('visibility', 'visible');
        $('#' + modalId).addClass('modal');
    } else {
        window.print();
    }
});

这里是小提琴

Answer 7:

下面有没有JavaScript或插件的解决方案 - 只是一些CSS和标记一个额外的类。该解决方案使用了自举增加了一个类时身体的对话是开放的事实。我们使用这个类，然后藏起了身体，并打印对话框。

为了确保我们能确定，我们需要在一个div主页内容中包含的所有内容页面的主体 - 我用ID =“搜索Maincontent”。下面的示例页面布局 - 与主网页和两个对话框

<body>
 <div class="container body-content">

  <div id="mainContent">
       main page stuff     
  </div>
  <!-- Dialog One -->
  <div class="modal fade in">
   <div class="modal-dialog">
    <div class="modal-content">
          ...
    </div>
   </div>
  </div>

  <!-- Dialog Two -->
  <div class="modal fade in">
   <div class="modal-dialog">
    <div class="modal-content">
          ...
    </div>
   </div>
  </div>

 </div>
</body>

然后在我们的CSS印刷媒体的质疑，我用display：none来隐藏一切，我不想显示的 - 即搜索Maincontent当一个对话框打开。我也用一个特定的类NOPRINT要在不应该被显示在页面的任何部分使用 - 比如动作按钮。在这里，我也隐藏页眉和页脚。您可能需要调整它得到真正想要你想要的。

@media print {
    header, .footer, footer {
        display: none;
    }

    /* hide main content when dialog open */
    body.modal-open div.container.body-content div#mainContent {
        display: none;
    }

    .noPrint {
        display: none;
    }
}

Answer 8:

我面临两个问题问题1：所有字段被用来从弹出打印时，在页面的底部后，其他和第2期的空白来一个。

我解决了这个由

使显示没有对所有的身体*元素大多去可见性隐藏其创造的空间，以便避免可见性隐藏

    @media print {
        body * {
           display:none;
        width:auto;
        height:auto;
        margin:0px;padding:0px; 
        }
        #printSection, #printSection * {
            display:inline-block!important;
        }
        #printSection {
            position:absolute;
            left:0;
            top:0;  
            margin:0px; 
            page-break-before: none;
            page-break-after: none;
            page-break-inside: avoid;      
        }
#printSection .form-group{

      width:100%!important;
      float:left!important;
      page-break-after: avoid;
    }
#printSection label{
        float:left!important;
        width:200px!important;
        display:inline-block!important;
      }

#printSection .form-control.search-input{
        float:left!important;
        width:200px!important;
        display: inline-block!important;
      }
}

Answer 9:

你可以从这个来源下载printThis LIB https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js并将其包含到你的HTML页面

调用下面的jQuery打印所有包括不可见的内容的内容。您可以包括在阵列中的CSS文件，如果你有多个CSS文件。

$("#modalDiv").printThis({ 
    debug: false,              
    importCSS: true,             
    importStyle: true,         
    printContainer: true,       
    loadCSS: "../css/style.css", 
    pageTitle: "My Modal",             
    removeInline: false,        
    printDelay: 333,            
    header: null,             
    formValues: true          
});

Answer 10:

 @media print{ body{ visibility: hidden; /* no print*/ } .print{ visibility:visible; /*print*/ } }

 <body> <div class="noprint"> <!---no print---> <div class="noprint"> <!---no print---> <div class="print"> <!---print---> <div class="print"> <!---print---> </body>

文章来源: Twitter Bootstrap: Print content of modal window