Как создать модальное окно, которое будет запрашивать пользователя пройти проверку hCaptcha?

Question

DarkVoyager

html

Как создать модальное окно, которое будет запрашивать пользователя пройти проверку hCaptcha?

Как создать обычное окно, которое позволит взаимодействовать с окружающим пространством, а также реализовать блокировку сайта? Необходимо установить z-index для hCaptcha на значение 999, а для модального окна - на 998. Пожалуйста, введите пример кода, который иллюстрирует это.

28 февраля 2025 г. 8:24

Ответы на вопрос 1

Похожие вопросы

Answer 1

Создать модальное окно, запрашивающее у пользователя пройти проверку hCaptcha, можно с помощью HTML, CSS и JavaScript. Ниже представлен пример с созданием модального окна и интеграцией hCaptcha.

### Пример кода:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Модальное окно с hCaptcha</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        /* Стили для модального окна */
        .modal {
            display: none; /* Скрыто по умолчанию */
            position: fixed;
            z-index: 998; /* z-index для модального окна */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto; /* Включить прокрутку если необходимо */
            background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
        }

        .modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 400px;
        }

        /* Блокировка фона под модальным окном */
        .modal.active {
            display: block; /* Показать модальное окно */
        }
    </style>
    <script src="https://www.hcaptcha.com/1/api.js" async defer></script>
</head>
<body>

<h2>Пример проверки hCaptcha</h2>
<button id="openModal">Показать модальное окно</button>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span id="closeModal" style="cursor:pointer; float:right;">&times;</span>
        <h2>Проверка hCaptcha</h2>
        <div class="h-captcha" data-sitekey="ВАШ_КЛЮЧ_ЗДЕСЬ"></div>
        <button id="verifyCaptcha">Подтвердить</button>
    </div>
</div>

<script>
    // Открытие модального окна
    document.getElementById("openModal").onclick = function() {
        document.getElementById("myModal").classList.add("active");
    }

    // Закрытие модального окна
    document.getElementById("closeModal").onclick = function() {
        document.getElementById("myModal").classList.remove("active");
    }

    // Обработка проверки hCaptcha
    document.getElementById("verifyCaptcha").onclick = function() {
        const captchaResponse = hcaptcha.getResponse();
        if (captchaResponse.length === 0) {
            alert("Пожалуйста, пройдите проверку.");
        } else {
            alert("Проверка пройдена!");
            // Здесь можно добавить дополнительную логику после успешной проверки
            document.getElementById("myModal").classList.remove("active");
            hcaptcha.reset(); // Сброс hCaptcha после проверки
        }
    }
</script>

</body>
</html>
```

### Краткое описание кода:
1. **HTML**: Создаем кнопку для открытия модального окна и само модальное окно, внутри которого находится виджет hCaptcha.
2. **CSS**: Определяем стили для модального окна и его содержимого. Устанавливаем `z-index` для модального окна на 998 и используем полупрозрачный фон для блокировки взаимодействия с окружающим пространством.
3. **JavaScript**: Добавляем логику для открытия и закрытия модального окна, а также проверки hCaptcha. При нажатии на кнопку "Подтвердить" проверяется, прошел ли пользователь проверку. Если hCaptcha пройдена, можно закрыть модальное окно и выполнить дальнейшие действия.

### Заметка:
Не забудьте заменить `ВАШ_КЛЮЧ_ЗДЕСЬ` на ваш реальный ключ сайта для hCaptcha.