[TC] Re: модальное окно
Здравствуйте, Андрей.
Андрей пишет:
Вот код который я использую:
// Добавляем модальные окна в футер
add_action('wp_footer', 'my_custom_modal_window');
function my_custom_modal_window() {
<!-- Ярлык для очистки состояния окна -->
<a id="clearTarget" style="display: none;"></a>
<!-- Контейнер модального окна заказа обратного звонка -->
<div id="iw-modal" class="iw-modal">
<div class="iw-modal-wrapper">
<div class="iw-CSS-modal-inner">
<div class="iw-modal-header">
<h3 class="iw-modal-title">Заказ обратного звонка!</h3>
<a href="#clearTarget" title="Закрыть" class="iw-close">?</a>
</div>
<div class="iw-modal-text">
</div>
</div>
</div>
</div>
Зависит от того на чем написано модальное окно, можно на css и ajax,
для wordpress есть плагины. В этом варианте скринридер их не видит,
появляются только после вызова или настраивается показ автоматом, так
задерживают посетителя. Обычно если на сайте появляется всплывающее окно,
я ухожу с такого сайта. Можно написать На чистом css, модальные окна, на
css получаются урезанные, а с использования ajax, более функциональные.
Зрячие разработчики визуально, скрывают модальные окна, а вот от скрин
ридера их нужно скрывать редактируя стили. Чтобы скрыть и от скринридера
есть специальный тег ARIA, но нужно учесть, что для вызова такого окна
требуется граматно написать css.
Выглядит это примерно так:
/* класс для модального окна почта */
.feedback-email-modal {
background: rgba(0,0,0,0.7); /* Фоновый оттенок */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
transition: all 0.5s ease;
margin: 0;
padding: 0;
/* Скрываем окно до активации */
display: none;
}
/* Активируем модальное окно через :target */
#feedback-email-modal:target {
display: block; /* Показываем окно */
overflow-y: auto; /* Прокрутка содержимого внутри окна */
}
Для настройки внутренней части кода, также пишется css.
Если код написан грамотно, это достаточно удобно, у меня на сайте
обратная связь настроенна с модальными окнами.
--
Суважением tezkachel. mailto tezkach***@y*****.ru
Здравствуйте.
Меня интересовал не код, а чисто где посмотреть на такое окно.
Можно ссылочку на ваш сайт, где естьтакие окна?
С уважением, Андрей.
04.06.2026 10:53, tezkachel пишет: