При создании веб-сайта могут возникнуть случаи, когда вам потребуется временно или навсегда отключить основную часть страницы. Это может быть полезно в таких сценариях, как отображение наложения загрузки, предотвращение взаимодействия с пользователем во время определенных процессов или создание представления, доступного только для чтения. В этой статье мы рассмотрим семь эффективных методов отключения основной части веб-сайта с помощью PHP и JavaScript, приведя примеры кода для каждого подхода.

Метод 1: наложение CSS
Один простой способ отключить тело — добавить наложение CSS, которое покрывает всю страницу. Это не позволяет пользователям взаимодействовать с базовым контентом. Вот пример:

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  pointer-events: none;
}

<div class="overlay"></div>

Метод 2. Отключение взаимодействия пользователя с JavaScript
Вы также можете отключить взаимодействие с пользователем, фиксируя и предотвращая события в документе. Этот метод позволяет выборочно включать или отключать определенные события. Вот пример использования JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', function(event) {
    event.preventDefault();
  });
});

Метод 3: установите для элемента Body значение «только для чтения».
Чтобы сделать весь элемент body доступным только для чтения, вы можете отключить атрибут contentEditable. Это предотвращает выделение или изменение текста. Вот пример:

document.body.setAttribute('contentEditable', 'false');

Метод 4: отключение элементов формы
Если вы хотите отключить определенные элементы формы на странице, вы можете установить атрибут disabled. Это не позволяет пользователям взаимодействовать с входными данными формы. Вот пример:

var formElements = document.querySelectorAll('input, select, textarea');
formElements.forEach(function(element) {
  element.disabled = true;
});

Метод 5. Удаление прослушивателей событий
Другой подход заключается в удалении прослушивателей событий из определенных элементов или всего документа. Это предотвращает запуск любых связанных действий. Вот пример:

document.removeEventListener('click', yourClickListener);

Метод 6. Измените CSS, чтобы отключить взаимодействие с пользователем.
Вы можете изменить свойства CSS тела или отдельных элементов, чтобы отключить взаимодействие с пользователем. Например, установка для pointer-eventsзначения «нет» предотвращает запуск всех событий мыши. Вот пример:

body {
  pointer-events: none;
}

Метод 7: используйте библиотеки или платформы JavaScript
Многие библиотеки или платформы JavaScript предоставляют встроенные методы или плагины для отключения тела или определенных элементов. Например, с помощью jQuery вы можете использовать метод $(body).addClass('disabled'), чтобы добавить класс CSS, отключающий взаимодействие с пользователем.

Отключить тело веб-сайта можно различными способами с использованием PHP и JavaScript. Если вам нужно отобразить наложение загрузки, предотвратить взаимодействие с пользователем или создать представление только для чтения, эти методы предоставляют эффективные способы достижения желаемого результата. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим конкретным требованиям.