Закрыть всплывающее окно кликнув вне его

Шаг 1: Добавьте следующий код внутри блока <script></script> на вашей веб-странице:

document.addEventListener('click', function(event) {
var popup = document.getElementById('popup');
var targetElement = event.target;
if (popup.style.display === 'block' && !popup.contains(targetElement)) {
popup.style.display = 'none';
}
});

Этот код добавляет обработчик событий клика, который проверяет, является ли клик вне всплывающего окна. Если окно отображается и клик снаружи окна, то окно закрывается путем изменения свойства style.display на ‘none’.

Шаг 2: Ваше всплывающее окно должно быть обернуто в элемент с уникальным идентификатором, например:

<div id="popup">
<p>Текст всплывающего окна</p>
</div>

Обратите внимание, что идентификатор ‘popup’ в коде JavaScript соответствует идентификатору в HTML-разметке.

Шаг 3: Теперь вам нужно стилизовать ваше всплывающее окно и добавить функциональность открытия окна при нажатии на соответствующий элемент. Например:

<button onclick="document.getElementById('popup').style.display = 'block'">Открыть всплывающее окно</button>

Добавьте этот код в вашу HTML-разметку, чтобы создать кнопку, которая открывает всплывающее окно. Кнопка должна быть связана с вашим всплывающим окном через идентификатор.

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

Как закрыть всплывающее окно

Существует несколько способов закрыть всплывающее окно при клике вне него:

  1. Добавьте обработчик события click на всю область страницы.
  2. При клике проверьте, является ли целевой элемент клика дочерним элементом всплывающего окна.
  3. Если целевой элемент не является дочерним элементом всплывающего окна, закройте окно.

Вот пример реализации данного подхода:


document.addEventListener('click', function(event) {
var popup = document.getElementById('popup');
var targetElement = event.target;
// Проверяем, является ли целевой элемент дочерним элементом всплывающего окна
var isClickedInsidePopup = popup.contains(targetElement);
// Если целевой элемент не является дочерним элементом всплывающего окна, закрываем окно
if (!isClickedInsidePopup) {
popup.style.display = 'none'; // закрытие всплывающего окна
}
});

В этом примере используется JavaScript для добавления обработчика события click на всю страницу. Затем при каждом клике проверяется, является ли клик дочерним элементом всплывающего окна. Если клик произошел вне всплывающего окна, окно закрывается путем изменения стиля display на 'none'.

Теперь вы знаете, как закрыть всплывающее окно при клике вне него. Этот подход позволяет обеспечить удобство использования всплывающих окон на вашем веб-сайте.

Простая инструкция по закрытию окна при клике вне него

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

Для начала, создайте всплывающее окно в HTML-коде с помощью элементов

. Дайте этому элементу уникальный идентификатор, чтобы можно было обратиться к нему в JavaScript.

Пример всплывающего окна:


<div id="popup" class="popup">
<p>Это всплывающее окно</p>
</div>

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

Вот пример простого CSS-кода для всплывающего окна:


.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

Теперь, когда всплывающее окно создано и стилизовано, добавьте JavaScript-код, чтобы оно закрывалось при клике вне его области. Ниже приведен пример простого кода.


document.addEventListener('click', function(event) {
var popup = document.getElementById('popup');
if(event.target.closest('.popup') === null) {
popup.style.display = 'none';
}
});

Этот код добавляет обработчик событий клика на всю страницу. Когда происходит клик, он проверяет, является ли элемент, на который был клик, частью всплывающего окна. Если это не так, то окно будет скрыто, установив свойство display в ‘none’.

Теперь ваше всплывающее окно будет закрываться при клике вне его области!

Метод 1: Использование JavaScript

Для того чтобы закрыть всплывающее окно при клике вне него, можно использовать JavaScript.

1. Добавьте следующий код в секцию вашего HTML-документа:

<script>
document.addEventListener('click', function(event) {
var popup = document.getElementById('popup');
if (event.target != popup && !popup.contains(event.target)) {
popup.style.display = 'none';
}
});
</script>

2. Ваше всплывающее окно должно иметь уникальный идентификатор. Например:

<div id="popup">

</div>

3. Теперь, когда вы щелкаете вне всплывающего окна, оно будет автоматически закрываться.

Примечание: если у вас есть несколько всплывающих окон на странице, вы можете использовать тот же самый код для каждого из них, указав соответствующий идентификатор.

Инструкция по добавлению JavaScript-кода на страницу

Если вы хотите добавить JavaScript-код на свою веб-страницу, следуйте этой простой инструкции:

  1. Откройте HTML-файл в текстовом редакторе или специализированной среде разработки.
  2. Найдите тег <head> в вашем HTML-файле.
  3. Внутри тега <head> создайте новый тег <script>. Тег <script> используется для вставки JavaScript-кода на страницу.
  4. Добавьте свой JavaScript-код между открывающим и закрывающим тегами <script>. Например:
<script>
// Ваш JavaScript-код здесь
</script>

Обратите внимание, что JavaScript-код должен быть действующим и корректным. В противном случае, это может привести к ошибкам на вашей странице.

После добавления JavaScript-кода, сохраните файл и откройте его веб-браузером. Ваш JavaScript-код должен начать работать на странице.

Метод 2: Использование CSS

1. Добавьте всплывающему окну класс или идентификатор, чтобы выделить его с помощью CSS.

Пример:

<div id="popup">
<p>Содержимое всплывающего окна</p>
</div>

2. Добавьте стиль CSS для всплывающего окна с использованием свойства display: none;, чтобы скрыть его.

Пример:

#popup {
display: none;
}

3. Добавьте стиль CSS для всплывающего окна с использованием псевдокласса :target, чтобы отобразить его при наличии хэш-значения в URL.

Пример:

#popup:target {
display: block;
}

4. Добавьте ссылку или элемент, при клике на который будет отображаться всплывающее окно.

Пример:

<a href="#popup">Открыть всплывающее окно</a>

Теперь всплывающее окно будет отображаться при клике на ссылку или элемент, и закрываться при клике вне его.

Инструкция по добавлению стилей для закрытия окна с помощью CSS

С помощью CSS можно добавить стили, которые обеспечат закрытие всплывающего окна при клике вне него. Ниже приведена инструкция по добавлению этих стилей:

  1. В HTML-коде, определите класс всплывающего окна или добавьте его к существующему элементу, например, с помощью атрибута class.
  2. В CSS-файле или внутри тега <style> вставьте следующий код:
.popup {
/* Определите стили всплывающего окна */
}
.popup.active {
display: none;
/* Добавьте стиль, чтобы скрыть окно по умолчанию */
}
body:not(.popup) {
/* Определите стили для контента страницы без окна */
}
  1. В JavaScript-коде, убедитесь, что добавлено следующее:
document.addEventListener('click', function(event) {
var popup = document.querySelector('.popup');
if (!popup.contains(event.target)) {
popup.classList.remove('active');
}
});
  • document.querySelector('.popup') находит элемент всплывающего окна по селектору класса .popup.
  • popup.contains(event.target) проверяет, является ли элемент, на который был совершен клик (event.target), дочерним элементом всплывающего окна.
  • Если условие !popup.contains(event.target) выполняется, то это означает, что клик был сделан вне всплывающего окна. В таком случае, удаляем класс active у элемента всплывающего окна, чтобы скрыть его.

После добавления указанных стилей и кода JavaScript, всплывающее окно будет закрываться при клике вне него.

Метод 3: Использование jQuery

Если вы уже используете jQuery на своем веб-сайте, вы можете легко закрыть всплывающее окно при клике вне него с помощью этой библиотеки.

Сначала убедитесь, что у вас есть подключенный файл jQuery перед закрывающим тегом </body>. Вы можете подключить его с помощью следующего кода:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Затем, чтобы закрыть всплывающее окно при клике вне него, вам понадобится добавить следующий код в свой скрипт:

$(document).mouseup(function(e) {
var container = $(".popup");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});

В этом коде мы привязываем обработчик события «mouseup» к документу. Когда пользователь кликает в любом месте на странице, код проверяет, является ли целью этого клика элемент с классом «popup» или его дочерние элементы. Если это не так, всплывающее окно будет скрыто.

Убедитесь, что у вас есть элемент с классом «popup», который представляет ваше всплывающее окно:

<div class="popup">
Текст или контент вашего всплывающего окна...
</div>

Не забудьте заменить «popup» на класс, который вы используете для своего всплывающего окна.

Теперь ваше всплывающее окно будет закрываться при клике вне него с использованием jQuery.

Оцените статью