Как да си направите бутон за затваряне и скриване на елемента от страницата

Как да направим "Close" бутона, за да се скрие елемента от страницата

В статията се описва една много проста и удобни решения за това как да добавите елемент на сайта "Close" бутон на думата или на кръста-, който дава възможност на посетителя да се скрие от страницата или затворите ненужен елемент на определена единица, като просто кликнете върху нея.






Изпълнението ще дръпне само няколко реда код, така че как да се направи функционален сайт или блог, доста лесно с помощта на CSS или използване на JQuery. В зависимост от избраната опция, бутон за всеки от избрания блок могат да се добавят ръчно чрез редактиране на независим кода на страницата, или софтуер - с помощта на скрипт.

Пример
За да се определи един бутон, аз бях тук е образ във формата на кръст. абсолютно позициониране спрямо основния възел. Обща пример за HTML дизайн е както следва:

Относителна CSS код е както следва:

поп-блок на дисплея: инлайн блок;
позиция: относителна; / * Трябва да бъдат посочени * /
ширина: 30%;
височина: 300px; / * Височина на блок * /
марж: 1%;
>
.близък блок дисплей: блок;
позиции: абсолютен;
отгоре: 8 пкс;
дясно: -8px;
ширина: 16px;
височина: 16px;
фон изображение: URL (данни: изображение / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAElBMVEXqAAD8oaH / AAD / RA3 / VR7 /// 91 + I / 7AAAAQklEQVR42oXPwQoAIAgD0JXu / 385FfTQgnYweKAp9pUXmE + swAFWAG8owQBTqjQQ8SQOcAdRQVtkqHy7dDFd / X / tAVqqAopyUfkOAAAAAElFTkSuQmCC);






курсора: указател;
>
.поп-блок р широчина: 100%;
височина: автоматичен;
>

Вариант 1: "Close" бутон е само на CSS

За да изчезне, като щракнете върху елемент с помощта на CSS, можете да използвате маркера за формуляра . За този код в основния модул ще трябва да се добавят няколко нови ключови думи:

И за да допълнят CSS:

# Поп-отметка дисплей: няма;
>
# Поп-отметка: проверява + .pop блок видимост: скрит; / * За да се освободи място - дисплей: няма; * /
>

Ако страницата не е един блок, който искате да скриете, когато се използва този вариант за всеки добави маркери Трябва да посочите уникален идентификатор и да добавите CSS код за него.

Вариант 2: Автоматично добавяне на кръст бутон на JQuery

В примера бутон ръчно затваряне е настроен само за първия елемент, а другите две, автоматично се добавя бутон от скрипт:

. $ (Функция () $ ( ".pop блок") всяка (функция () Var closeTrigger = $ (това) .find ( "близък блок.) Дължина .;
ако (closeTrigger <1 ) $ (Това) .append ( " ');
> Иначе завръщане '';
>
. $ ( ". Близък блок") на (с щракване, функция () $ (това) .closest ( "поп-блок.") FadeOut (100) .;
>);
>);
>);

скрипт алгоритъм е както следва: всички тези блокове, за да инспектира за наличието във всеки ключов елемент, ако не, добави нищо общо, ако има. С кликване върху бутона, за да се скрие следващия блок с определения за избор.

Здравейте, мисля, че е много полезно нещо, не забравяйте да се възползват от, но има няколко въпроса: Възможно е като че да завърже друг бутон, но с добавянето на (като отметки), не знам как да дори да го обясня, да речем, потребителят е кликнал на "Х", както аз го разбирам, докато те ще почисти бисквитки, тя се този елемент няма да бъдат видени от повторно влизане в сайта, е добра, но можете да направите така, че е друг бутон "+", когато се натисне, се добавя материала така да се каже, в лична страница на потребителя на сайта, с други думи, да направи нещо като кошница Потребителят маркираните Телем материали? И вторият въпрос, как да се направи меню като чекмедже в ляво имате на сайта? Благодаря.