Как закрыть блок кликом вне блока?

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

1. Использование модального окна (Modal):
Модальные окна в Bootstrap представляют собой специальные блоки, которые можно вызывать через JavaScript. У модального окна есть встроенная функциональность, позволяющая закрыть его при клике вне блока. Для этого нужно просто добавить атрибут data-dismiss="modal" к элементу, клик на который должен вызывать закрытие окна.

Пример:

   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
           <h4 class="modal-title" id="myModalLabel">Modal Header</h4>
         </div>
         <div class="modal-body">
           Modal Body
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div>
     </div>
   </div>

   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch modal</button>

В этом примере, нажатие на кнопку "Launch modal" вызовет появление модального окна. Используя кнопку закрытия окна в шапке или кнопку "Close" в подвале, модальное окно будет закрыто. Также, если пользователь кликнет вне окна, оно также закроется.

2. Использование событий JavaScript:
Если вы не хотите использовать модальное окно, то вы можете использовать JavaScript и обработчики событий для достижения желаемого результата. Ниже приведен пример кода, который закрывает блок при клике вне него.

   <div id="myBlock" style="width: 200px; height: 200px; background-color: #f1f1f1;">
     <h3>My Block</h3>
   </div>

   <script>
     document.addEventListener("click", function(event) {
       var myBlock = document.getElementById("myBlock");
       var targetElement = event.target;

       if (!myBlock.contains(targetElement)) {
         // Закрываем блок
         myBlock.style.display = "none";
       }
     });
   </script>

В этом примере, при клике на любой элемент на странице, обработчик событий проверяет, является ли целевой элемент блоком myBlock или его потомком. Если нет, то блок будет скрыт, установив свойство display равным "none".

Оба способа позволяют закрыть блок при клике вне него. Вы можете выбрать подходящий вариант в зависимости от своих потребностей и используемых инструментов.