Как сделать кнопку "Закрыть" и скрыть элемент со страницы

Знак остановка запрещенаВ статье рассмотрены очень простое и удобное решения того, как добавить к элементу на сайте надпись "Закрыть" или кнопку-крестик, которая дает возможность посетителю скрыть со страницы ненужный элемент или закрыть определенный блок, просто кликнув по ней.
  Реализация потянет всего на несколько строк программного кода, так как сделать такой функционал на сайте или в блоге довольно легко при помощи CSS или используя jQuery. В зависимости от выбранного варианта, кнопку для каждого выбранного блока можно добавить вручную, через самостоятельное редактирование кода страницы, или программно - с помощью скрипта.

ПРИМЕР
  Для обозначения кнопки я использовал вот такое изображение в виде крестика , с абсолютным позиционированием относительно основного блока. Общая HTML-конструкция примера выглядит так:
<div class='pop-block'> <!--основной блок, который будет скрыт-->
 <p>
  Какой-то контент
 </p>
 <span class='close-block'></span> <!--кнопка закрытия-->
</div>
  Относительный код CSS такой:
.pop-block {
  display: inline-block;
  position: relative; /* указывать обязательно */
  width: 30%;
  height: 300px; /* высота всего блока */
  margin: 1%;
}
.close-block {
  display: block;
  position: absolute;
  top: 8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAElBMVEXqAAD8oaH/AAD/ra3/vr7///91+I/7AAAAQklEQVR42oXPwQoAIAgD0JXu/385FfTQgnYweKAp9pUXmE+swAFWAG8owQBTqjQQ8SQOcAdRQVtkqHy7dDFd/X/tAVqqAopyUfkOAAAAAElFTkSuQmCC);
  cursor: pointer;
}
.pop-block p {
  width: 100%;
  height: auto;
}

Вариант 1. Кнопка "Закрыть" только на CSS

  Чтобы сделать исчезновение элемента по клику с помощью CSS, можно воспользоваться тегом формы <input>. Для этого к основному коду блока потребуется добавить несколько новых тегов:
<input type="checkbox" id="pop-checkbox"> <!--тег размещается непосредственно у блока-->
  <div class='pop-block'>
   <p>
   Какой-то контент
   </p>
  <label for="pop-checkbox" class="close-block"></label> <!--кнопка закрытия; значение для for соответствует id у input-->
</div>
И дополнить CSS:
#pop-checkbox {
  display: none;
}
#pop-checkbox:checked + .pop-block {
  visibility: hidden; /*чтобы освободить занимаемое место - display: none;*/
}
Если на странице не один блок, который нужно скрыть, то при использовании этого варианта для каждого добавленного тега <input> нужно указывать уникальный идентификатор и добавлять для него код CSS.

Вариант 2. Автоматическое добавление кнопки-крестика на jQuery


Использование JavaScript(jQuery) позволяет избавиться от внесения дополнительного HTML-кода в документ для каждого блока, который нужно скрыть, если он не один - это существенно:
<div class='pop-block'>
 <p>
  Какой-то контент
 </p>
  <!--кнопки нет!-->
</div>
  В примере, вручную кнопка закрытия установлена только к первому элементу, к двум другим, кнопка добавляется автоматически, с помощью скрипта:
$(function(){
  $ ('.pop-block').each(function(){
   var closeTrigger = $(this).find('.close-block').length;
   if (closeTrigger < 1 ){ // проверяем наличие кнопки и если нет - добавляем
    $(this).append('<span class="close-block"></span>');
   }else{
    return '';
   }
   $('.close-block').on('click', function(){
    $(this).closest('.pop-block').fadeOut(100);
   });
  });
});
  Алгоритм скрипта следующий: у всех указанных блоков, провести проверку на наличие в каждом элемента кнопки, если нет, то добавить, ничего не делать если присутствует. По клику на кнопку, скрыть ближайший блок с указанным селектором.

©http://magentawave.com

6 комментариев:

  1. Анонимный24.04.2016, 19:57

    Вариант только на CSS. Непонятно как установить саму кнопку ? У меня отображается только надпись "Какой то контент" Объясните новичку как быть с кнопкой ? Кнопка это изображение ? Как её прикрутить )) ?

    ОтветитьУдалить
  2. Анонимный24.04.2016, 21:00

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

    ОтветитьУдалить
    Ответы
    1. С ней нужно "правильный" блок скрывать )

      Удалить
  3. Здравствуйте, думаю очень полезная штука, обязательно воспользуюсь, но есть пара вопросов: можно как то прикрутить еще одну кнопку, но уже с добавлением (как закладки) не знаю как даже это обьяснить, допустим нажал пользователь "Х" как я понимаю пока не почистит куки, то он этот элемент уже не будет видеть при повторном заходе на сайт, это хорошо, но можно так сделать чтоб была еще кнопка "+" при нажатии на которую материал добавлялся как бы в личную страничку пользователя на сайте, другими словами сделать что то вроде корзины отмеченных пользователем материалов? И второй вопрос, как сделать такое выдвижное меню как у Вас слева на сайте? Спасибо.

    ОтветитьУдалить
    Ответы
    1. Еще одну кнопку прикинуть можно, насчет "корзины" можно подумать. По поводу мену, надеюсь, опубликовать в ближайшее время статью.

      Удалить
  4. Анонимный01.08.2018, 02:09

    Спасибо за мануал, добрый человек! Очень помогли.

    ОтветитьУдалить

Следующее Предыдущее

BestProject