Web Scripts

Как скрыть блок при клике за его пределами?

• 12-12-2017 •

Часто ли вам приходилось делать всплывающие блоки? Думаю что часто, но так же должна быть возможность скрыть этот блок, крестик это безусловно хорошо, но было бы хорошо, если при клике за пределом всплывающего блока он скрывался

Скрываем окно по клику снаружи

Пример:

See the Pen Hide if not parent block by Aleksandrs (@CoolS2) on CodePen.0

Как видно на примере, когда мы кликаем по кнопкам, появляются блоки и чтобы их скрыть, нужно кликнуть в любое пустое место

Разбор кода

HTML

Для начала создадим простой список с помощью ul li, внутри каждого списка, добавим span в котором будет наш невидимый контент.


<nav>
     <ul>
       <li>
         Contacts
        <span>
          <h3>Hidden block 1</h3>
          Here is hidden text, click outside for hide
        </span>
       </li>
       <li>
         News
         <span>
       <h3>Hidden block 1</h3>
          Here is hidden text, click outside for hide
        </span>
       </li>
       <li>
         Photos
         <span>
    <h3>Hidden block 1</h3>
          Here is hidden text, click outside for hide
        </span>
    </li>
     </ul>
   </nav>
   

CSS

Выравниваем списки по горизонтали, добавляем границы и отступы, чтобы это было похоже на кнопки и для фэншуя при наводке мышкой, поменяем цвет у границы. Так как это родитель наших скрытых блоков, ставим им position: relative;

Оформляем схожим стилем наши всплывающие блоки и ставим им display:none;


li{
  display:inline-block;
  border: 1px solid #ccc;
  padding:10px;
  margin-right: 20px;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
}
li:hover{
  border-color: #0c7fd7;
}
li span{
  display:none;
  position: absolute;
  border: 1px solid #ccc;
  border-radius: 6px;
  top: 50px;
  width: 200px;
  padding: 10px;
}

JQuery

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


$('li').on('click', function(){
   $('span', this).show();
 });
 

Дальше для удобства мы создаем переменную block, которая и является нашим всплывающим блоком. Когда срабатывает триггер mouseup (нажатая кнопка мыши отпущена), мы проверяем является ли наш всплывающий блок объектом по которому кликнули.

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


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

Вот и все, надеюсь пост был полезен, оставляйте свои комментарии, может у кого есть способ получше! Так же можете глянуть вот этот пост: Как сделать блок плавающим во время скролла

Добавить комментарий