**HTML:**
«`html
«`
**JavaScript:**
«`javascript
function confirmAction(action, message, user_id) {
// Создаем div для всплывающего окна подтверждения и устанавливаем его стили
const confirmDialog = document.createElement(‘div’);
confirmDialog.classList.add(‘confirm-dialog’);
// Заменяем {действие} и {user_id} в сообщении на фактические значения
message = message.replace(‘{действие}’, action).replace(‘{user_id}’, user_id);
// Создаем параграф для сообщения подтверждения и задаем ему текст
const confirmDialogMessage = document.createElement(‘p’);
confirmDialogMessage.textContent = message;
// Создаем div для кнопок подтверждения
const confirmDialogButtons = document.createElement(‘div’);
confirmDialogButtons.classList.add(‘confirm-dialog-buttons’);
// Создаем кнопку подтверждения («Да») и задаем ей текст и стили
const confirmButton = document.createElement(‘button’);
confirmButton.classList.add(‘confirm-button’);
confirmButton.textContent = ‘Да’;
// Добавляем обработчик события клика к кнопке подтверждения
confirmButton.addEventListener(‘click’, () => {
// Выполняем действие — в данном случае удаление пользователя с указанным user_id (не показано в этом коде)
// Удаляем всплывающее окно подтверждения
confirmDialog.remove();
});
// Создаем кнопку отмены («Нет») и задаем ей текст и стили
const cancelButton = document.createElement(‘button’);
cancelButton.classList.add(‘cancel-button’);
cancelButton.textContent = ‘Отменить’;
// Добавляем обработчик события клика к кнопке отмены
cancelButton.addEventListener(‘click’, () => {
// Закрываем всплывающее окно подтверждения без выполнения какого-либо действия
confirmDialog.remove();
});
// Добавляем кнопки во всплывающее окно подтверждения
confirmDialogButtons.appendChild(confirmButton);
confirmDialogButtons.appendChild(cancelButton);
// Добавляем сообщение и кнопки во всплывающее окно подтверждения
confirmDialog.appendChild(confirmDialogMessage);
confirmDialog.appendChild(confirmDialogButtons);
// Добавляем всплывающее окно подтверждения в документ, показывая его поверх всех других элементов (z-index: 9999)
document.body.appendChild(confirmDialog);
confirmDialog.style.zIndex = ‘9999’;
}
«`
**Объяснение:**
Этот код еще больше расширяет предыдущие примеры, добавляя стили отображения всплывающего окна поверх всех других элементов на странице. Для этого используется CSS-правило `z-index: 9999`, которое присваивается всплывающему окну после его добавления в документ.
**Преимущества:**
* Гарантирует, что всплывающее окно подтверждения всегда будет отображаться поверх всех других элементов на странице, даже если они перекрывают его.
* Это повышает видимость и важность всплывающего окна, что делает его более эффективным для предотвращения непреднамеренных действий.
