Плаваюча кнопка + спливаюча форма

by Сергій Куліков

HTML

Запрошую у мій Telegram канал, де я ділюся корисним: https://t.me/KulikovSerhiiChannel

<br><br>##########<br><br>










<div style="height: 2000px"></div>

CSS

#floatingButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

#popupForm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border: 2px solid #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

JavaScript

// Створюємо кнопку та додаємо її на сторінку з ID
var floatingButton = document.createElement('button');
floatingButton.textContent = 'Клікни мене!';
floatingButton.id = 'floatingButton';
document.body.appendChild(floatingButton);

// Функція для створення спливаючого вікна форми
function createPopupForm() {
	var popup = document.createElement('div');
	popup.textContent = 'Тут наша форма';
	popup.id = 'popupForm';

	// ... код створення форми ...

	// Додаємо спливаюче вікно на сторінку
	document.body.appendChild(popup);
}

// Додаємо обробник події кліка на кнопку
floatingButton.addEventListener('click', createPopupForm);