Закрытие Модального окна в любой области вне окна, но с кнопкой Х

@NewProfile · Регистрация: 19.01.2022

Студворк — интернет-сервис помощи студентам

Значит, такая проблема. У меня есть модальные окна, они закрываются по кнопке "х", но если нажать вне окна, то оно не закрывается.
Я пробовал разные варианты, пробовал варианты, которые раннее предлагались на форуме, но у меня в таком случае не работает кнопка, а кнопка мне тоже нужна.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    display: none;
    pointer-events: none;
}
 
.modalDialog:target {
overflow: scroll;
    display: block;
    pointer-events: auto;
}
 
.modalDialog > div {
    width: 600px;
    height: 1000px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
 
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
 
.close:hover { background: #00d9ff; }

HTML5
1
2
3
4
5
6
7
8
9
10
<a href="#openModal"><img src="любая картинка для кнопки" alt="Кнопка" title="Кнопка" border="0" width="200" height="80"></a>
 
<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Закрыть" class="close">X</a>
<b><span style="font-size: 20pt;">Заголовок</span></a></b>
        <div>
ИНФОРМАЦИЯ
</div>
    </div>

@TGreenForest · 27.01.2022, 17:46

JavaScript
1
2
3
4
5
$(document).click(function (e) {
    if ($(e.target).is('.modal-window')) {
        closeModal()
    }
});

.modal-window блок покрывающий весь экран, при клике на который происходит закрытие модалки
closeModal() функция закрытия модалки
структура модалки ↓

HTML5
1
2
3
4
5
6
7
8
<div class="modal-window">
        <div class="modal-window-body">
            <div class="modal-window-wrapper">
                <form action="">
                </form>
            </div>
        </div>
    </div>

@NewProfile · 28.01.2022, 11:58 **[ТС]**

Сообщение от TGreenForest

.modal-window блок покрывающий весь экран, при клике на который происходит закрытие модалки
closeModal() функция закрытия модалки
структура модалки ↓

Спасибо Большое за ответ. Но я не очень понял, по поводу нового блока. Мне нужно ещё поверх имеющихся блоков ещё добавить блок .modal-window. Я попробовал это сделать, но это ,наоборот, изменило внешний вид.

KingdaKa · 29.01.2022, 09:42

Вообще такое закрытие делается через JavaScript

Если очень неплохое видео про модальные окна, рекомендую посмотреть - [del]

@NewProfile · 31.01.2022, 09:31 **[ТС]**

Спасибо за видео, но мне кажется, что такие материалы лучше воспринимаются текстом. А текстовая версия у автора стоит 3 доллара.

@TGreenForest · 01.02.2022, 17:55

Вот более наглядный пример в JSfiddle https://jsfiddle.net/2mb8t90y/11/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <button onclick="showModal()">Открыть модалку</button>
  <div class="modal-window">
        <div class="modal-window-body">
            Тело модалки
        </div>
    </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
*{
  margin: 0;
  padding: 0;
}
.modal-window{
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
}
.modal-window-body{
  height: 100px;
  width: 150px;
  position: absolute;
  background-color: #fff;
  top: 30%;
  left: 50%;
  transform: translatex(-50%);
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).click(function (e) {
    if ($(e.target).is('.modal-window')) {
        closeModal()
    }
});
function showModal() {
    $(".modal-window").fadeIn(300)
    $('body').css({'overflow': 'hidden'})
};
function closeModal() {
    $(".modal-window").fadeOut(300)
    $('body').css({'overflow': 'auto'})
    $('input[type=tel]').val('');
};

Добавлено через 40 минут
На любой блок можно повесить onclick="closeModal()" и этот блок будет работать как крестик

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

KingdaKa 1306 / 781 / 190 Регистрация: 19.09.2020 Сообщений: 1,993
	29.01.2022, 09:42
	Вообще такое закрытие делается через JavaScript Если очень неплохое видео про модальные окна, рекомендую посмотреть - [del] 0

@NewProfile 0 / 0 / 0 Регистрация: 19.01.2022 Сообщений: 22
	31.01.2022, 09:31 [ТС]
	Спасибо за видео, но мне кажется, что такие материалы лучше воспринимаются текстом. А текстовая версия у автора стоит 3 доллара. 0