Код для випадаючого вікна з потрібними скриптами


<!-- Кнопка для відкриття -->
<button class="open-button" id="openModal">Відкрити вікно</button>

<!-- Модальне вікно -->

<div class="modal-overlay" id="modal">
    <div class="modal">
        <button class="close-button" id="closeModal">Закрити</button>
        <pre>
            <?php
            print_r($reviews);
            ?>
        </pre>
    </div>
</div>

<style>
    /* Кнопка відкриття */
    .open-button {
        position: fixed;
        bottom: 20px;
        right: 50%;
        background-color: #007BFF;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
        z-index: 1000;
    }

    /* Фонове затемнення */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }
    .modal-overlay pre {
        margin-top: 40px;
    }

    /* Контейнер модального вікна */
    .modal {
        background: white;
        padding: 20px;
        max-width: 100%;
        width: 90%;
        max-height: 80%;
        overflow-y: auto;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        text-align: unset;
    }

    /* Кнопка закриття */
    .close-button {
        background-color: #FF0000;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
        position: sticky;
        top: 20px;
        left: 20px;
        z-index: 102;
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Отримуємо елементи
        const openModalButton = document.getElementById('openModal');
        const closeModalButton = document.getElementById('closeModal');
        const modal = document.getElementById('modal');

        // Функція відкриття модального вікна
        openModalButton.addEventListener('click', () => {
            modal.style.display = 'flex';
        });

        // Функція закриття модального вікна
        closeModalButton.addEventListener('click', () => {
            modal.style.display = 'none';
            console.log('clicked');
        });
    })
</script>

Ви знайшли цю статтю корисною?