Как сделать кнопку закрытия окна в html
Есть список сообщений.
При помощи JavaScript для каждого сообщения добавьте в верхний правый угол кнопку закрытия.
Результат должен выглядеть, как показано здесь:
Чтобы добавить кнопку закрытия, мы можем использовать либо position:absolute (и сделать плитку ( pane ) position:relative ) либо float:right . Преимущество варианта с float:right в том, что кнопка закрытия никогда не перекроет текст, но вариант position:absolute даёт больше свободы для действий. В общем, выбор за вами.
Тогда для каждой плитки код может выглядеть следующим образом:
pane.insertAdjacentHTML("afterbegin", '
Элемент становится pane.firstChild , таким образом мы можем добавить на него обработчик события:
pane.firstChild.onclick = () => pane.remove();
Как изменить кнопку закрытия всплывающего окна
Например, код всплывающего окна "Клик по кнопке" имеет такой вид:
Вам необходимо добавить код в теге . Загрузим изображение и, например, в личном кабинете, в файловом менеджере кликните на файл:
Откроется изображение для просмотра и скопируем URL адрес изображения для параметра backgroundImage:
Укажем URL адрес изображения в коде вызова, например, будет выглядеть так:
Указав URL адрес изображения и изменяя эти параметры: top, right, width, height, Вы можете добиться нужного положения кнопки:
CSS кнопки закрытия окна
Данные web скрипты наша компания использует в создании веб сайтов при разработке всплывающих диалоговых окон. Поэтому если вам нужны услуги по изготовлению и раскрутке сайтов или интернет магазинов - обращайтесь в компанию ABCname.
- CSS / HTML
- FrontEnd (ФронтЭнд)
Помогла ли вам статья?
347 раз уже помогла
Комментарии: (0) Написать комментарий
КАТЕГОРИИ
- Создание Интернет магазина
- Создание корпоративного сайта
- Создание сайта каталога
- Создание сайта визитки
- Создание Landing page
- Создание эксклюзивного проекта
- Создание сайта для дропшиппинга
- Создание сайта для продажи
- Создание новостного сайта
- Создание сайта для доставки еды
- Создание сайта для строительной компании
- Создание сайта для юридической фирмы
- Создание сайта для агентства недвижимости
- Создание сайта для салона красоты
- Создание сайта мебели
- Создание сайта сантехники
- Создание интернет-магазина кофе и чая
- Создание интернет-магазина одежды
- Создание интернет-магазина косметики
- Создание интернет-магазина кондитера
- Создание интернет-магазина парфюмерии
- Создание интернет-магазина игрушек
- Создание интернет-магазина посуды
- Создание интернет-магазина электроники
- Создание интернет-магазина строительных материалов
- Создание интернет-магазина интимных товаров
- Создание интернет-магазина спортивных товаров
- Создание сайта для турагентства
- Разработка сайта по трудоустройству
- Создание сайта для хостинг компании
- Создание сайта для психолога
- Создание сайта для гос. организации
- Создание сайта для стоматологии
- Создание сайта для украинской православной церкви
- Создание интернет-магазина мужской и женской обуви
- Создание интернет-магазина сумок и чемоданов
- Разработка интернет-магазина удобрений и семян
- Разработка сайта по проведению онлайн семинаров
- Создание сайта по аренде автобусов
- Создание сайта по ремонту техники
- Создание сайта по изделиям из камня и мрамора
- Изготовление магазина медицинского оборудования
- Изготовление сайта для учителя или репетитора
- Изготовление сайта для кафе или ресторана
- Разработка сайта для гостиницы, отеля
- Создание сайта для фотографа
- Создание интернет-магазина аптеки
- Проектирование сайта для дистанционного обучения
- Интернет-магазин товаров для животных
- Создание сайта для цветочного магазина
- Изготовление сайта ворот и ограждений
- Создание сайта для продажи товаров
Кнопка закрытия
Универсальная кнопка закрытия для закрытия содержимого, например, модального окна и предупреждения.
On this page
Пример
С помощью .btn-close предоставляется возможность отклонить или закрыть компонент. Стиль по умолчанию ограничен, но легко настраивается. Измените Sass переменные, чтобы по умолчанию изаменить фоновое изображение background-image . Не забудьте добавить текст для программ чтения с экрана с помощью aria-label .
button type="button" class="btn-close" aria-label="Close">button>Отключенное состояние
Отключенные кнопки закрытия меняют свою прозрачность opacity . Мы также применили pointer-events: none и user-select: none для предотвращения срабатывания при наведении и при активном состоянии.
button type="button" class="btn-close" disabled aria-label="Close">button>Белый вариант
Измените значение по умолчанию для .btn-close на белый с помощью класса .btn-close-white . Этот класс использует свойство фильтра filter для инвертирования фонового изображения background-image .
button type="button" class="btn-close btn-close-white" aria-label="Close">button> button type="button" class="btn-close btn-close-white" disabled aria-label="Close">button>Sass
Переменные
$btn-close-width: 1em; $btn-close-height: $btn-close-width; $btn-close-padding-x: .25em; $btn-close-padding-y: $btn-close-padding-x; $btn-close-color: $black; $btn-close-bg: url("data:image/svg+xml,"); $btn-close-focus-shadow: $input-btn-focus-box-shadow; $btn-close-opacity: .5; $btn-close-hover-opacity: .75; $btn-close-focus-opacity: 1; $btn-close-disabled-opacity: .25; $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);