Реализация потянет всего на несколько строк программного кода, так как сделать такой функционал на сайте или в блоге довольно легко при помощи CSS или используя jQuery. В зависимости от выбранного варианта, кнопку для каждого выбранного блока можно добавить вручную, через самостоятельное редактирование кода страницы, или программно - с помощью скрипта.
ПРИМЕР
Для обозначения кнопки я использовал вот такое изображение в виде крестика , с абсолютным позиционированием относительно основного блока. Общая HTML-конструкция примера выглядит так:
<div class='pop-block'> <!--основной блок, который будет скрыт-->
<p>
Какой-то контент
</p>
<span class='close-block'></span> <!--кнопка закрытия-->
</div>
Относительный код CSS такой:<p>
Какой-то контент
</p>
<span class='close-block'></span> <!--кнопка закрытия-->
</div>
.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;
}
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:<div class='pop-block'>
<p>
Какой-то контент
</p>
<label for="pop-checkbox" class="close-block"></label> <!--кнопка закрытия; значение для for соответствует id у input-->
</div>
#pop-checkbox {
display: none;
}
#pop-checkbox:checked + .pop-block {
visibility: hidden; /*чтобы освободить занимаемое место - display: none;*/
}
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>
В примере, вручную кнопка закрытия установлена только к первому элементу, к двум другим, кнопка добавляется автоматически, с помощью скрипта: <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);
});
});
});
Алгоритм скрипта следующий: у всех указанных блоков, провести проверку на наличие в каждом элемента кнопки, если нет, то добавить, ничего не делать если присутствует. По клику на кнопку, скрыть ближайший блок с указанным селектором. $ ('.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
Вариант только на CSS. Непонятно как установить саму кнопку ? У меня отображается только надпись "Какой то контент" Объясните новичку как быть с кнопкой ? Кнопка это изображение ? Как её прикрутить )) ?
ОтветитьУдалитьС большим трудом разобрался куда чего и как, часа два возился, в итоге получилось, блок скрывается по нажатию кнопки. А вот реклама от google помещённая в этот блок остаётся и никуда не исчезает. :(
ОтветитьУдалитьС ней нужно "правильный" блок скрывать )
УдалитьЗдравствуйте, думаю очень полезная штука, обязательно воспользуюсь, но есть пара вопросов: можно как то прикрутить еще одну кнопку, но уже с добавлением (как закладки) не знаю как даже это обьяснить, допустим нажал пользователь "Х" как я понимаю пока не почистит куки, то он этот элемент уже не будет видеть при повторном заходе на сайт, это хорошо, но можно так сделать чтоб была еще кнопка "+" при нажатии на которую материал добавлялся как бы в личную страничку пользователя на сайте, другими словами сделать что то вроде корзины отмеченных пользователем материалов? И второй вопрос, как сделать такое выдвижное меню как у Вас слева на сайте? Спасибо.
ОтветитьУдалитьЕще одну кнопку прикинуть можно, насчет "корзины" можно подумать. По поводу мену, надеюсь, опубликовать в ближайшее время статью.
УдалитьСпасибо за мануал, добрый человек! Очень помогли.
ОтветитьУдалить