<!-- Кнопка для відкриття -->
<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>