NHLeads - Все примеры и демонстрации

🎯 Основные возможности

📐 Размеры модальных окон

🎭 Анимации появления

📍 Расположение на экране

Различные варианты позиционирования модального окна:

Кнопки расположены в тех же позициях, что и соответствующие модальные окна

🧪 Тестирование

⚙️ Настройки поведения

Тестирование различных параметров поведения модального окна:

🔧 Отладка

🚀 Продвинутые возможности

🎯 Расширенные условия показа

Новые возможности для точного таргетинга и контроля показа модальных окон:

ℹ️ Информация о текущем окружении:

Загружается...

⚡ Триггеры показа

Попробуйте различные способы активации модальных окон:

Тест клик-триггера:

Сначала нажмите "При клике", затем эту кнопку

Прокрутите страницу вниз

Когда вы достигните 50% прокрутки, может появиться модальное окно

Сначала активируйте триггер скролла кнопкой выше

🎯 Целевой блок для триггера

Когда этот блок появится в поле зрения, может показаться модальное окно

Сначала нажмите "При достижении элемента" выше

⚠️ Тест изоляции CSS

На этой странице специально добавлены CSS правила, которые могли бы сломать старые модальные окна:

.modal-overlay { background: red !important; z-index: 1 !important; }
.modal { background: yellow !important; }

Наши модальные окна должны работать корректно, так как используют префикс leadsnh-

💻 Быстрый старт:

<script src="https://modal.workerdev.ru/nhleads.min.js"></script>
<script>
const modal = new NHLeads({
    template: 'lead-form',
    title: 'Получить консультацию',
    nameLabel: 'Ваше имя',
    contactLabel: 'Телефон или Email'
});
modal.show();
</script>

Лог событий: