Twitter Bootstrap: печать содержимого модального окна

Я разрабатываю сайт, используя Bootstrap, который имеет 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 - 'print', и она нажала, я хочу, чтобы этот модальный шрифт был напечатан. Я был бы прав, говоря, что javascript будет использоваться? Если да, как я могу сказать javascript для печати только открытого модального, а не других?

Вся помощь была оценена.

Ответы

Ответ 1

Другое решение

Вот новое решение, основанное на Bennett McElwee answer в том же вопросе, как указано ниже.

Протестировано с IE 9 и 10, Opera 12.01, Google Chrome 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.appendChlid(delimiter);
        }
    }

    $printSection.appendChild(domClone);
}

Вы готовы распечатать любой элемент на своем сайте!

Просто позвоните printElement() с помощью своих элементов и выполните 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; }
}

Кредиты переходят к Greg, которые уже ответили на аналогичный вопрос: Print < div id = printarea > <;/дел > только?

Я вижу одну проблему при использовании JavaScript: пользователь не может видеть предварительный просмотр - по крайней мере, в Internet Explorer!

Ответ 2

Я предлагаю вам попробовать этот плагин jQuery элемент печати

Он может позволить вам просто распечатать выбранный элемент.

Ответ 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 -->

Ответ 4

Это переработанное решение, которое также будет работать для модальных окон, созданных с использованием шаблона Grails, где вы можете иметь один и тот же модальный шаблон, называемый несколько раз (с разными значениями) в одном теле. Эта тема очень помогла мне, поэтому я подумал, что поделюсь ею, если другие жители Грайла найдут здесь дорогу.

Для тех, кто любопытен, принятое решение не сработало для меня, потому что я представляю таблицу; каждая строка имеет кнопку, которая открывает модальное окно с более подробной информацией о записи. Это привело к тому, что несколько разделов printSection создавались и печатались друг над другом. Поэтому мне пришлось пересмотреть js, чтобы очистить div после завершения печати.

CSS

Я добавил этот CSS непосредственно к моему modal 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 принятого ответа (на основе Bennett McElwee answer), но он переработан с использованием: не 'от 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>

Я надеюсь, что это поможет кому-то!

Ответ 5

Здесь опция с использованием расширения 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/

Это может быть полезно, если вы не хотите, чтобы это применялось к каждой отдельной печати, и просто делайте это на своей пользовательской кнопке печати (что было моим делом).

Ответ 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();
}

});

здесь скрипка

Ответ 7

Вот решение без Javascript или плагина - только некоторые css и один дополнительный класс в разметке. Эти решения используют тот факт, что BootStrap добавляет класс в тело, когда диалог открыт. Мы используем этот класс, чтобы скрыть тело и напечатать только диалог.

Чтобы мы могли определить основную часть страницы, нам нужно содержать все содержимое основной страницы в 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;
    }
}

Ответ 8

Я столкнулся с двумя проблемами Проблема 1: все поля шли один за другим Пробел 2 в нижней части страницы при использовании для печати из всплывающего окна.

Я решил это сделать

создание отображения для всех элементов body *, большинство из которых идут для скрытой видимости, которая создает пространство, поэтому избегайте видимости скрытых

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