Показываем/скрываем блок при клике javascript

Toggle

Чтобы элементы отображались только при наведении или фокусе, добавьте класс к родительскому элементу и один из следующих классов к любым дочерним элементам, которые должны быть скрыты.

Дочерние элементы будут отображаться, когда на родительский элемент имеется наведение или фокус. Добавьте к родительскому элементу, чтобы он мог получать фокус с помощью клавиатуры и сенсорных устройств.

Если в скрытом дочернем элементе есть элементы или , они уже доступны для навигации с помощью клавиатуры и будут отображать дочерний элемент. Поэтому добавьте , чтобы родительский элемент все еще мог фокусироваться на сенсорных устройствах.

Душа моя озарена неземной радостью, как эти чудесные утра.
Душа моя озарена неземной радостью, как эти чудесные утра.

Способ #9. Перекрытие другим элементом

Элемент можно спрятать, разместив поверх него другой элемент, совпадающий по цвету с фоном страницы. В примере для перекрытия используется псевдоэлемент , который размещается поверх второго блока:

See the Pen hide with an overlay by SitePoint (@SitePoint) on CodePen.

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

Как работают всплывающие нападайки и поп-апы с рекламой

Такие всплывающие окна делаются очень просто: 

1. Хозяева сайта создают на своей странице объект, который лежит сверху всего, как целлофан на обложке журнала. 
2. Этому объекту задают ширину во весь экран и высоту во весь экран, чтобы нельзя было дальше кликать и переходить по сайту. 
3. Затем этому объекту устанавливают затемнённый фон. Так появляется затемнение всего экрана. Именно эта штука с затемнением и мешает нормально пользоваться страницей.
4. Внутрь объекта с затемнением кладут ещё один объект — рекламу, баннер, призыв подписаться, предложение оставить свой номер телефона.
5. И всё это висит поперёк страницы

Наша задача — отключить оба объекта, чтобы они пропали с глаз долой.

Способ #3. transform

Свойство позволяет передвигать (), масштабировать (), вращать () или искажать () элемент. Оно позволяет также его спрятать. Например, можно радикально уменьшить масштаб () или передвинуть блок за пределы вьюпорта ().

See the Pen hide with transform: scale(0); by SitePoint (@SitePoint) on CodePen.

CSS-трансформации предлагают великолепную производительность с использованием аппаратного ускорения. Трансформируемый элемент перемещается на отдельный слой и может изменяться, не затрагивая другие слои. Пространство, занимаемое блоком до изменения, остается на странице, но полностью скрытый элемент уже недоступен для взаимодействия.

Visibility

Следующий способ скрыть блок или текст свойство — . Значение будет скрывать элемент. Так же, как и свойство , скрытый элемент будет влиять на макет нашей веб-страницы. Единственное отличие заключается в том, что на этот раз он не будет доступен для взаимодействия. Кроме того, он будет скрыт от чтения с экрана.

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

.hide {
   visibility: hidden;
}

Ниже пример, можете посмотреть разницу.

Обратите внимание на то, что потомки элемента с могут быть видимыми, если их свойство. Попробуйте навести курсор только на скрытый элемент, а не на пункт внутри. Вы увидите, что тип курсора не изменится

Кроме того, если вы попытаетесь щелкнуть на элемент, ваши клики не будут учтены

Вы увидите, что тип курсора не изменится. Кроме того, если вы попытаетесь щелкнуть на элемент, ваши клики не будут учтены.

Тег внутри будет как и раньше захватывать все события мыши. Как только вы наведете курсор мыши на текст он станет видимым и начнет регистрировать события.

Property Values

Как найти код нужного элемента

Чтобы увидеть, какой именно кусок кода отвечает за всплывающее окно, будем пользоваться средствами самого браузера — Инспектором. В Хроме он вызывается нажатием клавиш Ctrl+Shift+i, а в Сафари — Cmd+Option+i.

Но есть ещё один способ, который сейчас нам подходит больше:

1. Открываем страницу и дожидаемся, пока появится реклама. 
2. Затем правой кнопкой мыши щёлкаем на картинке в центре, которая мешает просмотру, и выбираем «Просмотреть код» (Inspect Element).
3. Инспектор сразу подсветит нужную нам строчку.

Делаем свой блокировщик любой рекламы за 3 минуты

Мы нашли участок кода, который отвечает за назойливую рекламу. Теперь пусть браузер сам закроет окно. Для этого используем свойство display — оно решает, показывать этот элемент или нет.

Щёлкаем правой кнопкой мышки на нужном элементе и выбираем «Посмотреть код».

Откроется панель Инспектора и подсветит нужный участок кода, который отвечает за этот элемент.

Примеры

В следующем примере реализуется обработчик, который ссылается на две различные именованные кнопки, которые должны быть взаимоисключающими парами в пользовательском интерфейсе.The following example implements a handler that references two different named buttons that are intended to be a mutually exclusive pair in the user interface. Перед выполнением фактической логики программы, связанной с кнопкой, сама кнопка имеет значение , а вторая кнопка в паре имеет значение .Prior to running the actual program logic associated with the button, the button itself is set to be , and the other button in the pair is set to .

Скрипт показывает блок только 1 раз 1 пользователю

По вот этому поисковому запросу наша страница индексируется :

скрипт который показывает блок только 1 раз 1 пользователюНаписание алгоритма :

Пользователь заходит на сайт.

Пользователю показывается какой-то блок информации 1 раз.

Значит, каким-тио образом, данные пользователя надо записать в память браузера, чтобы он понимал, что это именно тот пользователь, кому уже был показан данный блок!

Под данный вариант подходит несколько возможностей, для записи данных пользователя: 1). Сессия — действует до закрытия браузера. 2). Куки — время действия задается админом. 3). LocalStorage

3 вариант модернизированный

Третий вариант, нажать — скрыть блок, нажать по кнопке — показать блок, практически копия третьего вариант, только скрипты вынесены в тег script

Пример
html
css
js

Показать блок

<div>

<p id=»first» onclick=»first()»>Показать блок</p>

<p id=»first_yelloy»; style=»display:none» onclick=»first_yelloy()»>Скрыть блок </p>

<div id=»second_hide» style=»display:none»>

здесь дргой блок с текстом…

</div>

</div>

p#first {

cursor: pointer;

font-family: cursive;

line-height: 13px;

text-indent: 22px;

line-height: 33px;

border: 1px solid #d2d2d2;

font-size: 18px;

}

p#first_yelloy {

cursor: pointer;

background: #ff9900;

font-size: 18px;

color: white;

text-indent: 22px;

line-height: 33px;

border: 1PX SOLID #ff9900;

}

<script>

function first() {

document.getElementById(«second_hide»).setAttribute(«style», «opacity:1; transition: 1s; height: 100%;»);

document.getElementById(«first»).setAttribute(«style», «display: none»);

document.getElementById(«first_yelloy»).setAttribute(«style», «display: block»);

}

function first_yelloy() {

document.getElementById(«second_hide»).setAttribute(«style», «display: none»);

document.getElementById(«first_yelloy»).setAttribute(«style», «display: none»);

document.getElementById(«first»).setAttribute(«style», «display: block»);

}

</script>

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Как скрыть HTML элемент при помощи jQuery

Для начала рассмотрим пару примеров, как мы можем скрыть элемент со страницы при помощи обычного CSS:

.my-selector {
opacity: 0;
height: 0;
display: none;
text-indent: -9999px;
}

opacity — отвечает за прозрачность, height — за высоту нашего контейнера, display — за отображение, text-indent — обычно влияет только на отступ текста (в очень редких случаях такой вариант тоже можно применять). Не будем писать про извращения c position: absolute

В jquery чаще всего используют связки:

<script>
$('.mySelector').hide(); // скрыть селектор
$('.mySelector').show(); // показать 
</script>

Кроме этого, иногда целесообразней использовать переключатели (toggle). Просто скрыв элемент, вы не убираете его из кода — это полезно когда в ваших скриптах он может позже появиться (на например это меню аккордеон — если вы удалите код со страницы нечего будет показывать). Для удаления селектора со страницы используется remove()

<script>
$('.mySelector').remove();
</script>

И хотя это не самый лучший вариант, ведь ваша страница сначала прогружается, а только потом скрипт ищет элемент и удаляет его. Будет гораздо лучше, если вы найдете файл, с помощью которого выводится тот или иной кусок кода, например на странице index.html или index.php — но если вы работаете с CMS, то не стоит рассчитывать что все будет так просто

Блочные и строчные элементы

Большинство элементов в CSS классифицируются как блочные () или строчные (), и это влияет на то, как эти элементы будут отображаться по умолчанию на веб-странице.

Важно знать к какому типу относится элемент, так как не все CSS свойства работают с обоими типами элементов. Некоторые CSS свойства работают только с блочными элементами, другие только со строчными

CSS свойство display позволяет переопределить тип элемента, заданный по умолчанию. Что в свою очередь, позволят по необходимости изменять тип элемента со строчного на блочный или с блочного на строчный.

Строчные элементы

Элемент определённый как строчный, будет занимать только необходимое количество места на веб-странице (занимаемое место зависит от содержимого строчного элемента), кроме этого такие элементы:

• игнорируют верхний и нижний внешний отступ, если он применен
• игнорируют свойства height и width
• могут быть выровнены с помощью свойства vertical-align

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

Блочные элементы

Блочные элементы всегда начинаются с новой строки и занимают всю доступную ширину, если ширина для элемента не была установлена. Кроме этого блочные элементы:

• могут иметь внешние и внутренние отступы
• растягиваются по высоте под свое содержимое
• не выравниваются свойством vertical-align

Строчно-блочные элементы

Строчно-блочное отображение элемента задается значением . В основном это способ сделать элемент строчным, но сохранить его «блочные» возможности: изменение высоты и ширины элемента, регулирование размеров внешних и внутренних отступов.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p { display: inline; }	
      span { display: block; }  
	  li { display: inline-block; }
    </style>
  </head>
  <body>
    <p>Абзац 1.</p><p>абзац 2.</p>
    <span>Практическое применение свойства display мы рассмотрим</span>
    <span>в главе "CSS меню"</span>
	<ul>
	  <li>Пункт 1</li>
	  <li>Пункт 2</li>
	  <li>Пункт 3</li>
	</ul>
  </body>
</html>

Попробовать »

Примечание: значение не поддерживается в IE7 и более ранних версиях.

Видимость элемента в CSS

display

Возможные значения:

• (отображается как блочный)
• (временно удаляет элемент из документа)
• (отображается как встроенный (строчный))
• (внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный, обтекается другими элементами (подобно img))
• (отображается как блочный и добавляется маркер списка)
• (элемент в качестве таблицы, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами)
• (элемент в качестве блочной таблицы)

Пример:

divhover{
	displaynone;
}

Результат:

Наведите курсор
А я без стиля

visibility

Возможные значения:

• (становится невидимым, но участвует в нормальном потоке элементов)
• (отображается как видимый)
• (для содержимого ячеек таблиц, отображаются как будто применен стиль (заданные строки и колонки убираются))

Пример:

divhover{
	visibilityhidden;
}

Результат:

Наведите курсор
А я без стиля

overflow

Возможные значения:

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

Пример:

div{
	width150px;
	height150px;
	overflowscroll;
}

Результат:

Это пример параграфа1. Это пример параграфа2. Это пример параграфа3. Это пример параграфа4. Это пример параграфа5. Это пример параграфа6. Это пример параграфа7. Это пример параграфа8. Это пример параграфа9. Это пример параграфа10. Это пример параграфа11. Это пример параграфа12. Это пример параграфа13. Это пример параграфа14. Это пример параграфа15. Это пример параграфа16. Это пример параграфа17. Это пример параграфа18.

Тот же самый пример с другим свойством:

div{
	width150px;
	height150px;
	overflowhidden;
}

Результат:

Это пример параграфа1. Это пример параграфа2. Это пример параграфа3. Это пример параграфа4. Это пример параграфа5. Это пример параграфа6. Это пример параграфа7. Это пример параграфа8. Это пример параграфа9. Это пример параграфа10. Это пример параграфа11. Это пример параграфа12. Это пример параграфа13. Это пример параграфа14. Это пример параграфа15. Это пример параграфа16. Это пример параграфа17. Это пример параграфа18.

Пропуск рендеринга с content-visibility #

Может быть трудно понять, какие значения включения использовать, поскольку оптимизация браузера может сработать только тогда, когда указан соответствующий набор. Вы можете поиграть со значениями, чтобы увидеть, что работает лучше всего , или вы можете использовать другое свойство CSS, вызываемое для автоматического применения необходимого сдерживания. гарантирует, что вы получите максимальный прирост производительности, который браузер может обеспечить, с минимальными усилиями от вас как разработчика.

Свойство content-visibility принимает несколько значений, но именно оно обеспечивает немедленное улучшение производительности. Элемент , который имеет прибыль , и сдерживание. Если элемент находится за пределами экрана (и не имеет никакого отношения к пользователю – релевантными элементами будут те, у которых есть фокус или выделение в их поддереве), он также получает сдерживание (и прекращает рисование и проверку его содержимого).

Что это значит? Короче говоря, если элемент находится за пределами экрана, его потомки не отображаются. Браузер определяет размер элемента, не учитывая его содержимое, и на этом останавливается. Большая часть визуализации, например, стили и макет поддерева элемента, пропускается.

Когда элемент приближается к области просмотра, браузер больше не добавляет  вложение и начинает рисовать и проверять попадание содержимого элемента. Это позволяет выполнить рендеринг как раз вовремя, чтобы пользователь мог его увидеть.

Использование display для строчных элементов

Свойство CSS display также используется для изменения поведения строчных и блочных элементов.

Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.

Строчные элементы занимают только необходимое для отображения пространство и не начинаются с новой строки. В качестве примеров строчных элементов можно привести span, тег ссылки и т.д.

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

display: inline;

Чтобы изменить поведение строчного элемента на поведение блочного:

display: block;

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:

Посмотреть онлайн демо-версию и код

На странице демо-версии отображен родительский div, а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:

• Родительский div очерчен черной рамкой и занимает всю доступную ширину;
• span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
• Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:

Посмотреть онлайн демо-версию и код

span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span.

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, дизлайки, подписки!

Пример применения свойства display для отображения / скрытия меню

Я использовал элемент div, который содержит маркированный список <ul>, элементы списка и гиперссылки. Ссылки представляют собой пункты меню.

Для разработки этого меню использовался ряд других свойств CSS. Свойство display изначально задано не было. Это означает, что меню будет отображаться.

Посмотреть онлайн демо-версию и код

Родительский div содержит меню, которое представляет собой сочетание элементов ul, li и <a>. При использовании display: none элемент div будет скрыт, как и все меню. Когда меню исчезает, ссылки перемещаются вверх, занимая пространство меню, потому что при использовании HTML display none элемент, к которому применено свойство, больше не будет занимать отведенное для него пространство.

Если после этого вы нажмете на ссылку показать меню, код jQuery добавит значение display: initial. Это сделает меню видимым, а ссылки сместятся вниз.

Возможности JavaScript

Данный язык программирования имеется неограниченное количество возможностей за счет своей универсальности.

Основными аспектами применения являются мобильные приложения для смартфонов, интерактивные веб-страницы сайтов и сервисов.

Бо́льшую часть новшеств привнесло присоединение к проекту компании AJAX, которая предоставила возможности, используемые в языке на сегодняшний день.

Для экономии трафика и увеличения удобства использования, ЯваСкрипт предоставляет возможность изменять страницы сайтов и сервисов небольшими частями незаметно для пользователя в режиме онлайн.

Это не требует отключения сайта на время редактирования или добавления новой информации.

Изменения происходят сразу, не требуя обновления или перезагрузки страницы.

Функция ЯваСкрипт может быть отключена по разным причинам.

Возможно, предыдущий пользователь намеренно мог его отключить, так как он не требовался для просмотра веб-страниц. Также отключение могло произойти самостоятельно.

Отключение javascript может послужить причиной отказа в открытии некоторых ссылок. Чуть ниже мы рассмотрим способы включения данной функции в популярных браузерах.

Способ #2. alpha-канал

Свойство влияет на элемент целиком, но вы можете также изменять видимость отдельных свойств: цвета (), фона () или рамки (). Чтобы скрыть их, используйте цвет в формате rgba (или hsla) и установите значение альфа-канала равным нулю, например, .

See the Pen hide with color alpha by SitePoint (@SitePoint) on CodePen.

Каждое свойство можно анимировать отдельно для создания интересных эффектов.

Эту технику нельзя применить к фоновым изображения (кроме тех, которые созданы с помощью CSS-градиентов).

Способы управления альфа-каналом:

• Ключевое слово . Устанавливает полную прозрачность, не поддерживает промежуточные анимации.
• : красный, зеленый, синий и альфа-канал.
• : оттенок, насыщенность, светлота и альфа-канал.
• HEX-формат: или

Using transitions on the CSS Clip Property

Using clipping seems to work as well. The idea is simply to set the clip
parameters in a way that clip the complete element in order to simulate hidden visibility.
The transition then gradually removes the clipping.
Some browsers might have problems
with percent values and so you need to specify the actual pixel sizes which is a
disadvantage for dynamic or responsive layouts.

Способ #6. display

, вероятно, самое популярное свойство для скрытия элементов на странице. Значение none эффективно удаляет блок, как будто его никогда и не существовало в DOM.

See the Pen hide with display: none by SitePoint (@SitePoint) on CodePen.

Однако в большинстве случаев — самый плохой способ спрятать что-то. Это свойство нельзя анимировать, и оно вызывает перерисовку страницы (layout), если только элемент не вырван из общего потока документа () или если не используется новое свойство contain.

Кроме того, свойство display может принимать множество значений (, , , , , …). Если вы сбрасываете его до значения , то вернуть затем правильное отображение может быть затруднительно (может помочь значение unset).

Пример: блог о путешествиях #

В этом примере мы базируем наш блог о путешествиях справа и применяем его к фрагментированным областям слева. Результаты показывают, что время рендеринга увеличивается с 232 мс до 30 мс при начальной загрузке страницы.

Блог о путешествиях обычно содержит набор историй с несколькими изображениями и некоторым описательным текстом. Вот что происходит в обычном браузере при переходе на блог о путешествиях:

1. Часть страницы загружается из сети вместе со всеми необходимыми ресурсами.
2. Браузер стилизует и размещает все содержимое страницы, не учитывая, является ли содержимое видимым для пользователя.
3. Браузер возвращается к шагу 1, пока не будут загружены все страницы и ресурсы.

На шаге 2 браузер обрабатывает все содержимое в поисках вещей, которые могли измениться. Он обновляет стиль и макет любых новых элементов, а также элементов, которые могли сместиться в результате новых обновлений. Это работа по рендерингу. На это нужно время.

Теперь подумайте, что произойдет, если вы разместите каждую из историй в блоге. Общий цикл тот же: браузер загружает и отображает фрагменты страницы. Однако разница заключается в объеме работы, выполняемой на шаге 2.

Благодаря видимости содержимого он будет стилизовать и разметить все содержимое, которое в настоящее время отображается пользователю (оно отображается на экране). Однако при обработке истории, которая полностью находится за пределами экрана, браузер пропустит работу по рендерингу и только создаст стиль и макет самого блока элемента.

Производительность загрузки этой страницы будет такой, как если бы она содержала полные экранные истории и пустые поля для каждой из закадровых историй. Это работает намного лучше, с ожидаемым снижением затрат на визуализацию загрузки на 50% или более . В нашем примере мы видим увеличение времени рендеринга с 232 мс до 30 мс . Это 7-кратный прирост производительности.

Какую работу нужно проделать, чтобы воспользоваться этими преимуществами? Сначала мы разбиваем контент на разделы:

Затем мы применяем к разделам следующее правило стиля:

PHP

.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

Обратите внимание, что по мере того, как контент перемещается в область видимости и исчезает, он будет запускаться и прекращать отображение по мере необходимости. Однако это не означает, что браузеру придется отображать и повторно отображать один и тот же контент снова и снова, поскольку работа по визуализации сохраняется, когда это возможно

Указание естественного размера элемента с помощью  #

Чтобы реализовать потенциальные преимущества , браузеру необходимо применить ограничение размера, чтобы гарантировать, что результаты рендеринга содержимого никоим образом не влияют на размер элемента. Это означает, что элемент будет выложен так, как если бы он был пустым. Если элемент не имеет высоты, указанной в обычном макете блока, то он будет иметь нулевую высоту.

Это может быть не идеально, так как размер полосы прокрутки будет смещаться в зависимости от того, что каждая история имеет ненулевую высоту.

К счастью, CSS предоставляет другое свойство, которое эффективно определяет естественный размер элемента, если на элемент влияет ограничение размера . В нашем примере мы устанавливаем его как оценку высоты и ширины секций.

Это означает, что он будет располагаться так, как если бы у него был единственный дочерний элемент с размерами «внутреннего размера», гарантируя, что ваши блоки без размера по-прежнему занимают место. действует как размер заполнителя вместо отображаемого содержимого.

display

is probably the most-used element-hiding method. A value of effectively removes the element as if it never existed in the DOM.

See the Pen
hide with display: none by SitePoint (@SitePoint)
on CodePen.

However, it’s possibly the worst CSS property to use in the majority of cases. It can’t be animated and will trigger a page layout unless the element is moved out of the document flow using or the new property is adopted.

is also overloaded, with options such as , , , , and more. Resetting back to the correct value after can be problematic (although may help).

Всё дело — в CSS

Чтобы компьютер понимал, какие элементы есть на странице, используют язык HTML, который говорит: «Тут заголовок, тут ссылка, тут обычный текст, тут картинка». А чтобы было ясно, как эти элементы должны выглядеть и работать, используют специальные правила — их называют стилями. Стили задают цвет и внешний вид всего, что есть на странице, а ещё управляют размером и поведением каждого элемента. 

Стили хранятся в таблицах, таблицы называют каскадными, всё вместе называется CSS — cascading style sheets. 

Вот больше примеров и практики по CSS:

• Самое простое и полезное введение в CSS.
• На стиле — подборка интересных CSS-свойств.
• 10 полезных инструментов для создания роскошного CSS.

Именно возможности CSS позволяют рисовать такие нападайки, которые занимают весь экран и мешают читать. Но мы используем свойства CSS против подобных сайтов и перепишем всё под себя. Для этого нам нужно будет найти код элемента, который отвечает за нападайку.

opacity and filter: opacity()

The and properties can be passed a number between 0 and 1, or a percentage between 0% and 100% denoting fully transparent and fully opaque accordingly.

See the Pen
hide with opacity: 0 by SitePoint (@SitePoint)
on CodePen.

There’s little practical difference between the two in modern browsers, although should be used if multiple effects are applied at the same time (blur, contrast, grayscale etc.)

Opacity can be animated and offers great performance, but be wary that a fully transparent element remains on the page and can trigger events.

Как скрыть или показать элемент используя анимацию на jQuery

Можно применять комбинацию fadeIn() и fadeOut(), использовать slideDown() и slideUp(), или же быстрая смена по клику — slideToggle() и fadeToggle(). Соответственно коды для них:

<script>
$(function(){
  $('.mySelector').fadeIn(); //показать
  $('.mySelector').fadeIn(500); //показать за 500 миллисекунд (пол секунды)
  $('.mySelector').fadeOut(); //скрыть

  $('.mySelector').slideUp(); //показать
  $('.mySelector').slideDown(); //скрыть

  $('.mySelector').fadeToggle(); //переключатель исчезновения-появления :)
  $('.mySelector').slideToggle(); //переключатель эффекта слайда :)
});
</script>

Если вам нужна плавная анимация, можно поставить число в миллисекундах 200, 400, 1200 и т.д. , или фразы в стиле slow, fast — тут уже как удобней, подробней смотрите в документации . Ну и если анимация нам не нужна вообще, а она бывает по умолчанию уже задана 600 (если ничего не путаю), то просто ставим 0 — fadeIn(0);

Конечно это не самый лучший вариант, и я вам настоятельно рекомендую несколько раз подумать прежде чем это всё использовать — ведь все эти эффекты создавались явно не для того чтобы скрывать элементы со страницы