MagentaWAVE
Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.
17 февраля 2016
Как сделать кнопку «Закрыть» и скрыть элемент со страницы
В статье рассмотрены очень простое и удобное решения того, как добавить к элементу на сайте надпись «Закрыть» или кнопку-крестик, которая дает возможность посетителю скрыть со страницы ненужный элемент или закрыть определенный блок, просто кликнув по ней.
Реализация потянет всего на несколько строк программного кода, так как сделать такой функционал на сайте или в блоге довольно легко при помощи CSS или используя jQuery. В зависимости от выбранного варианта, кнопку для каждого выбранного блока можно добавить вручную, через самостоятельное редактирование кода страницы, или программно — с помощью скрипта.
ПРИМЕР
Для обозначения кнопки я использовал вот такое изображение в виде крестика , с абсолютным позиционированием относительно основного блока. Общая HTML-конструкция примера выглядит так:
Относительный код 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, можно воспользоваться тегом формы . Для этого к основному коду блока потребуется добавить несколько новых тегов:
И дополнить CSS:
#pop-checkbox <
display: none;
>
#pop-checkbox:checked + .pop-block <
visibility: hidden; /*чтобы освободить занимаемое место — display: none;*/
>
Если на странице не один блок, который нужно скрыть, то при использовании этого варианта для каждого добавленного тега нужно указывать уникальный идентификатор и добавлять для него код CSS.
Вариант 2. Автоматическое добавление кнопки-крестика на jQuery
Использование JavaScript(jQuery) позволяет избавиться от внесения дополнительного HTML-кода в документ для каждого блока, который нужно скрыть, если он не один — это существенно:
В примере, вручную кнопка закрытия установлена только к первому элементу, к двум другим, кнопка добавляется автоматически, с помощью скрипта:
Алгоритм скрипта следующий: у всех указанных блоков, провести проверку на наличие в каждом элемента кнопки, если нет, то добавить, ничего не делать если присутствует. По клику на кнопку, скрыть ближайший блок с указанным селектором.
Как сделать крестик в css
В примере ниже, в первых двух строка, эмодзи уже стоят, в третьей и четвертой используются специально зарезервированные HTML символы. Поскольку как и эмодзи так и спецсимволы — текст, к ним можно применять стили.
class="close--one ">❌ class="close--two">✖ class="close--three">✕ class="close--three">✖ .close--one font-size: 20px; > .close--two font-size: 30px; color: blueviolet; font-weight: 700; > .close--three font-size: 30px; > 
Результат:
Как сделать на чистом css пульсирующий светящийся крест?
- HTML
- +1 ещё
Как разделить (визуально) страницу на 4 части: 2 по горизонали, 2 по вертикали?
- 1 подписчик
- час назад
- 25 просмотров
Создание крестика в CSS [закрыт]
Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.
Закрыт 2 года назад .
Мне нужно воссоздать крестик ( вот такой ) при помощи css
Отслеживать
задан 8 фев 2021 в 11:24
61 1 1 золотой знак 1 1 серебряный знак 5 5 бронзовых знаков
Мы готовы рассмотреть ваши попытки и подсказать.
8 фев 2021 в 11:27
1. Заинтайнить svg в background. 2. Сделать 2 пересекающихся наклонных градиента, но углы получатся острыми. Можно дорезать через clip-path или ещё 2 или 4 градиента. 3. Сделать горизонтальный и вертикальный градиенты и повернуть с помощью transform. 4. Вместо градиентов использовать 2 псевдоэлемента. 5. Если фон однотонный, закрашивать не линии, а треугольники. Впрочем, я не вижу причин так делать.
8 фев 2021 в 11:31
@Qwertiy: минусуют за лень и невежество. Не будет приложен код и/или описана конкретная проблема, то я тоже присоединюсь к минусующим.