распечатать модальное окно, а не остальную часть страницы - PullRequest
4 голосов
/ 08 августа 2009

Я видел некоторые ответы на этот вопрос, но я думаю, что на самом деле у меня проблема с CSS.

Вот пример фрагмента моего HTML:

<id=container> children <id="modal">children</modal></container>

Если я открою модал, то есть кнопка печати. Когда я нажимаю на него, я использую jQuery, чтобы применить .noprint к #container и .print к #modal. Но модальное значение .print не учитывается, независимо от того, какой селектор я применяю, модальное содержимое не отображается. Что еще хуже, я не могу использовать Firebug, он не показывает мне, какие стили печати применяются. я пытался #container #modal.print {display: block; } и т.д ...

спасибо!

Ответы [ 2 ]

10 голосов
/ 08 августа 2009

Судя по звуку, ваш модальный элемент находится внутри контейнера. Полагаю, у вас есть такая разметка.

<div id="container">
    <span>children</span>
    <p>more children>
    <div id="modal">
        Modal text!
    </div>
</div>

И CSS вот так ...

.noprint { display: none;}
.print {display: block;}

Какой вы используете JavaScript для применения, например:

<div id="container" class="noprint">
    <span>children</span>
    <p>more children>
    <div id="modal" class="print">
        Modal text!
    </div>
</div>

В этих примерах элемент #modal находится внутри скрытого контейнера. Спецификация CSS гласит, что если родительский элемент скрыт, все дочерние элементы также будут скрыты, даже если они установлены на display: block (или любое другое допустимое значение display) или абсолютно позиционированы.

Что вы должны сделать, если хотите скрыть все на странице, кроме модального окна, чтобы ваша разметка была структурирована примерно так:

<div id="modal">
    Modal Text!
</div>
<div id="container">
    <span>children</span>
    <p>more children>
    <div id="modal">
        Modal text!
    </div>
</div>

Если вы не можете контролировать, где отображается модальный элемент, вы можете использовать jQuery, чтобы изменить положение модального элемента. Имейте в виду, что это может повлиять на макет вашего модального окна:

// Moves the element outside of the hidden container
$("#container").before($("#modal"));
4 голосов
/ 17 апреля 2012

Существует еще один способ печати содержимого модального окна. Добавьте эту функцию в модальное окно

Печать содержимого ModalPanel

Я попробовал это, и это работает. Вам нужно только поиграть с таблицами стилей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...