Потенциальное решение:
const body = document.querySelector('body');
body.innerHTML = `<div class="my-div"></div><div class="content">${body.innerHTML}</div>`;
Теперь у вас есть все содержимое тела рядом с вашим div, оба из которых вы можете скрыть / показать. Как указано ниже, я полностью разнесен, что это уничтожит ваших слушателей. Если вы хотите сохранить слушателей, попробуйте следующее:
const body = document.querySelector('body');
const fragment = document.createDocumentFragment();
const hideBody = () => {
for (let el of [...body.children]) (fragment.append(el))
}
const showBody = () => {
for (let el of [...fragment.children]) (body.append(el))
}
Прикрепите соответствующий к вашему событию. Это сохранит всех ваших слушателей. Если вам нужна какая-либо функциональность, DocumentFragment имеет методы querySelector() и querySelectorAll().
Другим методом является модальный метод, где у вас просто есть div, который покрывает всю страницу. Посмотрите, например, модальные Bootstrap . Если вы инициализируете его с помощью data-backdrop="static" и data-keyboard="false", оно не исчезнет, если щелкнуть снаружи или нажать esc . Элемент может быть выбран с помощью document.querySelector('.modal-backdrop'). Установите непрозрачность на 1, а фон - на белый или на любой другой эстетический вид.