Закрытие элемента по клику за пределами его области (вне элемента) в jquery

      2 комментария к записи Закрытие элемента по клику за пределами его области (вне элемента) в jquery

Сразу приведу пример. Представим простой интернет магазин, а именно страницу каталога с товарами. У каждого товара есть кнопка «подробнее», при нажатии на которую, появляется плашка с информацией о товаре.

Но у каждого товара есть своя такая плашка, которая скрытая и появится только по нажатии на кнопку. Так вот, окно открылось, но как его закрыть?




Можно конечно создать кнопку «закрыть», но представьте, как это не удобно. Пользователь обычно кликает за область нашего окна и вот именно так и нужно его закрывать.

Для начала, к примеру, создадим три товара, с одинаковым общим классом.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="product-one">
    <button class="button">Подробнее</button><br/>
    <div class="button_div">Текст, который скрывается</div>
</div>
<div class="product-one">
    <button class="button">Подробнее</button><br/>
    <div class="button_div">Текст, который скрывается</div>
</div>
<div class="product-one">
    <button class="button">Подробнее</button><br/>
    <div class="button_div">Текст, который скрывается</div>
</div>





Затем подключаем библиотеку jquery и вставляем следующий скрипт

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.button').click(function(){
        // скрываем все блоки
        $('.button_div').css("display","none");
        // убираем активный класс для продукта
        $(".product-one").removeClass("product-active")
        // Показываем блок у данного продукта
        $(this).parent(".product-one").children('.button_div').css("display","block");
        // Данному продукта добавляем класс
        $(this).parent(".product-one").addClass("product-active");
    });
    
    $(document).mouseup(function (e){ // событие клика по веб-документу
        var div = $('.button_div'); // тут указываем класс элемента
        if (!div.is(e.target) // если клик был не по нашему блоку
            && div.has(e.target).length === 0) { // и не по его дочерним элементам
            div.hide(); // скрываем его
        }
    });
</script>





Также подключите стили или скройте все блоки через js

1
2
3
4
5
<style>
    .button_div{
        display: none;
    }
</style>

После этого, при нажатии на кнопку «подробнее» будет появляться блок с текстом, а при нажатии в любое место вне элемента, блок исчезает.

Статья взята с сайта: https://daruse.ru/

2 thoughts on “Закрытие элемента по клику за пределами его области (вне элемента) в jquery”

  1. Сергей

    При клике по некоторому элементу управления на экране появляется div c текстом подсказок. У дива есть кнопка «закрыть». Но хочется, чтобы он закрывался не только по клику на кнопку, но и вне области этого div’a. Подскажите, как это реализовать?

    ↓

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