Закрытие блока при клике в любом месте

@maximamus · Регистрация: 12.01.2010

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

Приветствую! Не подскажете как новичку решить проблему?
Есть блок:

JavaScript
1
2
3
4
5
6
7
8
9
<div id="btopen">  
      <a onclick="document.getElementById('divwin4').style.display='block'"></a>
</div>
                
                
     <div id="divwin4">
           <div id="closeButton" onclick="document.getElementById('divwin4').style.display='none'">Х</div>
                Текст который открывается             
     </div>

Как можно сделать, что бы кнопка закрытия блока действовала в любом месте окна браузера, а не только по нажатию на "Х"?

@m1n1gamer · 11.08.2015, 17:21

Попробуйте , вот так

JavaScript
1
2
3
4
5
6
7
<div id="divwin4" onclick="document.getElementById('divwin4').style.display='none'">
                Текст который открывается         
текст1             
текст2             
текст3             
текст4             
     </div>

Добавлено через 4 часа 25 минут
Немного не правильно сделал,
функцию

JavaScript
1
document.getElementById('divwin4').style.display='none'

надо прописывать на тело т.есть

HTML5
1
2
3
4
5
<body OnClick="document.getElementById('divwin4').style.display='none'">
<div id="divwin4" style="display:block;">
ТЕКСТ
</div>
</body>

@maximamus · 15.08.2015, 10:56 **[ТС]**

я правильно понял - onclick нужно засунуть в тело body?
если их много, у меня порядка 4х, что тогда делать?

@Thisman · 15.08.2015, 13:30

maximamus, у вас не может быть больше одного body, на все остальные блоки навешивайте событие, так же как и показано в примере, только id меняйте

Добавлено через 5 минут
maximamus, если вы хотите, что бы при клике на body закрывалось, одно из нескольких окон ( смотря какой открыто ), то добавьте всем класс, и функцию поменяйте на

JavaScript
1
2
3
4
function hide(selector) {
    var elements = document.querySelectorAll(selector);
    for(var i = 0; i < elements.length; i++ ) elements[i].style.display = 'none';
}

HTML5
1
2
3
4
5
6
7
8
9
10
<body onclick=' hide(".hidden"); '>
     <div id="divwin4" class='hidden'>
         <div id="closeButton" onclick="document.getElementById('divwin4').style.display='none'">Х</div>
         Текст который открывается             
     </div>
     <div id="divwin2" class='hidden'>
         <div id="closeButton2" onclick="document.getElementById('divwin2').style.display='none'">Х</div>
         Текст который открывается             
     </div>
</body>

Есть еще пара способов оптимизировать это, прописывать не инлайново стиль, а добавлять нужный класс, тогда не понадобиться цикл, но это уже если оч надо)

Новые блоги и статьи Все статьи Все блоги /
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .
Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .

@maximamus 5 / 0 / 2 Регистрация: 12.01.2010 Сообщений: 167
	15.08.2015, 10:56 [ТС]
	я правильно понял - onclick нужно засунуть в тело body? если их много, у меня порядка 4х, что тогда делать? 0