Судя по звуку, ваш модальный элемент находится внутри контейнера. Полагаю, у вас есть такая разметка.
<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"));