Закрыть div при клике вне его

@kusttt · Регистрация: 05.07.2018

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

День добрый, может есть у кого соображения по поводу: есть кнопка и уже имеющийся Javascript код. По клику на кнопке под ней появляется текст. Не получается подправить код так, чтобы при клике на любом пустом пространстве текст мягко скрывался. Акцентирую, что код именно нужно дополнить (подправить), а не предложить радикально новое, пусть и более красивое решение. Знаю, что в коде есть лишнее, но оно нужно. Спасибо.

HTML5

<html>
<head>
</head>
<body>
 
<button type="submit" id="pusk"  />Отправить</button>
<div class="text hide" >
<ul>
<li>картина</li>
<li> рамка</li>
</ul>
</div>
 
<div class="hide" id="call"></div>

CSS

1
2
3

<style>
.hide{display: none;}
</style>

Javascript

<script>
var btn = document.getElementById('pusk');
var preloader = document.getElementById('call');
var text = document.querySelector('.text');
 
btn.addEventListener('click', function() {
  preloader.classList.remove("hide");
  setTimeout(function() {
    preloader.classList.add("hide");
    text.classList.remove("hide")
  }, 100);
  
});
 
</script>

HTML5

1 2	</body> </html>

@atanov · 12.01.2019, 14:42

kusttt, вопрос - что означает «клик по пустому месту»?

@Mr_Sergo · 12.01.2019, 18:33

kusttt, css для всего остального мы сами придумаем?

Добавлено через 3 часа 27 минут
kusttt,

Вообщем сделал с тем учетом что если клик был по тегу <li>, в котором находится текст, пропадать не будет -> https://codepen.io/Mr_Sergo/pen/JweBWM

HTML5

<button type="submit" id="pusk">Отправить</button>
<div class="text hide">
<ul>
<li>картина</li>
<li> рамка</li>
</ul>
</div>
 
<div class="hide" id="call"></div>

Javascript

var btn = document.getElementById('pusk');
var text = document.querySelector('.text');
var html = document.querySelector('html');
 
btn.addEventListener('click', function() {
    setTimeout(function() {
        text.classList.remove("hide");
    }, 100);
});
 
html.addEventListener('click', function(e) {
    if(e.target.id !== 'pusk' && e.target.tagName !== 'LI'){
        text.classList.add("hide");
    }
});

CSS

.hide{
    display: none;
}
 
li{
    width: 100px;
    background: #f4ffb8;
}

Если нужно что бы при клике по тегу то же пропадало, то JS можно переписать так

Javascript

var btn = document.getElementById('pusk');
var text = document.querySelector('.text');
var html = document.querySelector('html');
 
btn.addEventListener('click', function() {
    setTimeout(function() {
        text.classList.remove("hide");
    }, 100);
});
 
html.addEventListener('click', function(e) {
    if(e.target.id !== 'pusk'){
        text.classList.add("hide");
    }
});

@kusttt · 13.01.2019, 11:51 **[ТС]**

atanov,

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

что означает «клик по пустому месту»?

- означает на поле вне <div>ов.

Mr_Sergo, спасибо, ваш код работает. Вы правильно поняли, что мне требовалось.

Добавлено через 1 час 18 минут
Mr_Sergo, не сочтите за наглость, нельзя ли добавить в код условие, чтобы текст скрывался "плавно". Что-то типа Fadeout

@Mr_Sergo · 13.01.2019, 12:28

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

чтобы текст скрывался "плавно"

можно так, обратите внимание на изменение в css, важно! -> https://codepen.io/Mr_Sergo/pen/YddzeJ

Javascript

var btn = document.getElementById('pusk');
var text = document.querySelector('.text');
var html = document.querySelector('html');
 
btn.addEventListener('click', function() {
    setTimeout(function() {
        text.classList.remove("hide");
    }, 100);
});
 
html.addEventListener('click', function(e) {
    if(e.target.id !== 'pusk' && e.target.tagName !== 'LI'){
        text.classList.add("hide");
    }
});

CSS

.hide{
    opacity: 0;
    transition: 0.5s;
}
 
li{
    width: 100px;
    background: #f4ffb8;
}

но такой подход, на мой взгляд, не совсем верный, я бы сделал немного по-другому -> https://codepen.io/Mr_Sergo/pen/xmmxQW

Javascript

var btn = document.getElementById('pusk');
var text = document.querySelector('.text');
var html = document.querySelector('html');
 
btn.addEventListener('click', function() {
    text.style.display = 'block';
    text.style.transition = 'all 0s';
    text.style.opacity = 1;
});
 
html.addEventListener('click', function(e) {
    if(e.target.id !== 'pusk' && e.target.tagName !== 'LI'){
        text.style.transition = 'all 0.5s';
        text.style.opacity = 0;
        setTimeout(function() {
            text.style.display = 'none';
        },500);  // если время у transition стоит 0.5 (500мс) то соответствующее значение нужно прописать и тут
    }
});

CSS

.hide{
    opacity: 0;
    transition: 0.5s;   /* Здесь можно поменять время `затухания` */
}
 
li{
    width: 100px;
    background: #f4ffb8;
}

@kusttt · 13.01.2019, 12:53 **[ТС]**

Спасибо за ваш труд, но это не совсем то. Мой косяк, я не уточнил, что значит "мягко" При клике на кнопку под ней появляется текст. Когда я кликаю вне поля - текст резко исчезает и форма как бы резко "схлопывается". А мне бы хотелось, чтобы форма подтягивалась обратно к состоянию "без текста" плавно. Т.е. текст как бы мягенько исчезает под кнопку. Такое сделать реально или я фантазирую? Попробовал в стилях на форму повесить transition: 0.5s; - не помогло...

@Mr_Sergo · 13.01.2019, 13:10

kusttt, будет проще если вы кинете ссылку где что-то подобное реализовано что бы я мог увидеть то о чем вы говорите

Добавлено через 5 минут
Так -> https://codepen.io/Mr_Sergo/pen/PXXwmZ ?

Javascript

var btn = document.getElementById('pusk');
var text = document.querySelector('.text');
var html = document.querySelector('html');
 
btn.addEventListener('click', function() {
    text.style.display = 'block';
    text.style.transition = 'all 0s';
    text.style.top = '0px';
    text.style.opacity = 1;
});
 
html.addEventListener('click', function(e) {
    if(e.target.id !== 'pusk' && e.target.tagName !== 'LI'){
        text.style.transition = 'all 0.5s';
        text.style.opacity = 0;
        text.style.top = -20 + 'px';
        setTimeout(function() {
            text.style.display = 'none';
        },500);  // если время у transition стоит 0.5 (500мс) то соответствующее значение нужно прописать и тут
    }
});

CSS

.hide{
    opacity: 0;
    transition: 0.5s;   /* Здесь можно поменять время `затухания` */
    position: relative;
    top: -20px;
}
 
li{
    width: 100px;
    background: #f4ffb8;
}

@kusttt · 13.01.2019, 13:41 **[ТС]**

Вот если взять button и завернуть его в <div>ы и назначить <div>ам класс вроде такого .form{width: 20%; margin: 0 auto; position: relative; top:50%; border:1px solid #000000;}, то когда текст плавно прячется - дно формы резко подскакивает вслед за ним, а не мягко возвращается на "свое" место. По логике тот же transition: 0.5s; должен бы решить проблему, ан-нет...

@Mr_Sergo · 13.01.2019, 13:41

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

Т.е. текст как бы мягенько исчезает под кнопку

Вроде что-то похожее -> https://codepen.io/Mr_Sergo/pen/GPPgYq
html изменен

HTML5

<button type="submit" id="pusk">Отправить</button>
 
<div class="box">
    <ul class="text">
        <li>картина</li>
        <li> рамка</li>
    </ul>
</div>
 
<div class="hide" id="call"></div>

Javascript

var box = document.querySelector('.box');
var btn = document.querySelector('#pusk');
var html = document.querySelector('html');
 
btn.addEventListener('click', function() {
    box.classList.add('visible');
});
 
html.addEventListener('click', function(e) {
    if(e.target.id !== 'pusk' && e.target.tagName !== 'LI'){
        box.classList.remove('visible');
    }
});

CSS

.box{
    width: 0px;
    height: 0px;
    left: -20px;
    top: -20px;
    opacity: 0;
    position: relative;
    transition: 0.5s;
    background: #f4ffb8;
    overflow: hidden;
    z-index: -1;
}
 
.visible{
    width: 110px;
    height: 80px;
    left: 0px;
    top: 0px;
    opacity: 1;
    position: relative;
    transition: 0.5s;
    background: #f4ffb8;
    overflow: hidden;
}

@Mr_Sergo · 13.01.2019, 13:46

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

дно формы

Объясните что вы понимаете под этими словами

Добавлено через 3 минуты
Вы имеете ввиду что бы вся форма вместе с button плавно "схлопывалась" снизу вверх?

Добавлено через 1 минуту

проще было бы конечно посмотреть на пример

@kusttt · 13.01.2019, 14:25 **[ТС]**

Mr_Sergo, "дно формы" я имею ввиду border:1px solid, который border-bottom. Нарисовал картинкой во вложении, чтоб визуальной ясности привнести.

@Mr_Sergo · 13.01.2019, 15:06

kusttt,
Если я правильно вас понял то можно так -> https://codepen.io/Mr_Sergo/pen/QzzbYo

HTML5

<div class="commonDiv">
    <div class="box">
        <button type="submit" id="pusk">Отправить</button>
        <ul>
            <li>картина</li>
            <li> рамка</li>
        </ul>
    </div>
</div>

Javascript

var commonDiv = document.querySelector('.commonDiv');
var btn = document.querySelector('#pusk');
var html = document.querySelector('html');
 
btn.addEventListener('click', function() {
    commonDiv.classList.add('visible');
});
 
html.addEventListener('click', function(e) {
    if(e.target.tagName == 'HTML' || e.target.tagName == 'BODY'){
        commonDiv.classList.remove('visible');
    }
});

CSS

.commonDiv{
    width: 200px;
    height: 35px;
    border: 1px solid;
    padding: 40px 0px 0px 0px;
    overflow: hidden;
    transition: 0.5s;
}
 
.visible{
    height: 110px;
}
 
.box{
    width: 120px;
    height: 100px;
    margin: 0px auto;
}

@kusttt · 13.01.2019, 19:22 **[ТС]**

Плохо, что от исходного Javascript кода ничего не осталось (он был нужен). При клике на поле, очерченном вне border: 1px solid; текст не исчезает. Ну, да ладно, мне было основное сделать, чтобы текст пропадал при клике и вы мне в этом помогли, спасибо. Дальше сам буду копать в сторону transition.

Добавлено через 1 час 17 минут
Это решается как-то при помощи jquery и $(blockId).animate({height: 'show'}, 500);
Нашел на сайте пример.

@Mr_Sergo · 13.01.2019, 21:46

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

При клике на поле, очерченном вне border: 1px solid; текст не исчезает

Он и не должен исчезать!- по-скольку так прописано в условиях... а то что не прописано, соответственно не будет исполняться! ибо не прописано... таков он JS

Новые блоги и статьи
Как преобразовать список списков в простой список в Python bytestream 22.01.2025 При работе с Python разработчики часто сталкиваются с необходимостью обработки сложных структур данных, среди которых особое место занимают вложенные списки. Эти структуры представляют собой списки,. . .	Что такое GUID / UUID и как их создать bytestream 22.01.2025 В мире разработки программного обеспечения существует постоянная потребность в уникальной идентификации объектов, записей и ресурсов. Эта задача становится особенно актуальной в распределенных. . .	Как добавить пустую директорию в репозиторий Git bytestream 22.01.2025 При работе с системой контроля версий Git разработчики часто сталкиваются с ситуацией, когда необходимо сохранить пустую директорию в репозитории. Данная задача может показаться простой на первый. . .	Как валидировать адрес email в JavaScript bytestream 22.01.2025 JavaScript, как основной язык веб-разработки, предоставляет разработчикам множество инструментов для реализации эффективной валидации email-адресов. От простых встроенных решений до сложных. . .	Как заменить все вхождения подстроки в JavaScript bytestream 22.01.2025 Строки в JavaScript представляют собой неизменяемые последовательности символов, что делает их обработку особенно интересной с точки зрения оптимизации и выбора правильного подхода к решению задач. . . .	Управление версиями пакетов в Node.js. В чем разница между тильдой (~) и кареткой (^) в package.json bytestream 22.01.2025 В современной разработке программного обеспечения управление версиями пакетов играет ключевую роль в обеспечении стабильности и надежности проектов. Node. js, как одна из самых популярных платформ для. . .
Аутентификация на сайте с помощью формы bytestream 21.01.2025 В современном цифровом мире безопасная аутентификация становится краеугольным камнем защиты веб-приложений и пользовательских данных. Каждый день миллионы людей используют различные онлайн-сервисы,. . .	Как получить индекс в цикле for в Python bytestream 21.01.2025 При работе с коллекциями данных в Python часто возникает необходимость не только получить доступ к элементам последовательности, но и знать их позицию в процессе итерации. Индексация в циклах. . .	Как определить адрес, из которого локальный репозиторий Git был клонирован bytestream 21.01.2025 В современной разработке программного обеспечения система контроля версий Git стала неотъемлемой частью рабочего процесса. При работе с Git разработчики часто сталкиваются с необходимостью. . .	Какая разница между операторами == и === в сравнениях в JavaScript bytestream 21.01.2025 В мире веб-разработки JavaScript занимает особое место как динамический язык программирования, предоставляющий разработчикам широкий набор инструментов для создания интерактивных веб-приложений. . . .	Из чего и как собрать свой домашний кинотеатр bt_guru 21.01.2025 Создание домашнего кинотеатра: от идеи до реализации В современном мире домашний кинотеатр стал неотъемлемой частью комфортного жилого пространства, предоставляя возможность наслаждаться. . .	Ошибки стиральных машин bt_guru 21.01.2025 Современные стиральные машины представляют собой сложные электронные устройства, оснащенные множеством датчиков и систем контроля. Они способны самостоятельно определять вес загруженного белья,. . .

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,665
	12.01.2019, 14:42	2
	kusttt, вопрос - что означает «клик по пустому месту»? 0

@kusttt 0 / 0 / 0 Регистрация: 05.07.2018 Сообщений: 48
	13.01.2019, 11:51 [ТС]	4
	atanov, Сообщение от atanov что означает «клик по пустому месту»? - означает на поле вне <div>ов. Mr_Sergo, спасибо, ваш код работает. Вы правильно поняли, что мне требовалось. Добавлено через 1 час 18 минут Mr_Sergo, не сочтите за наглость, нельзя ли добавить в код условие, чтобы текст скрывался "плавно". Что-то типа Fadeout 0

@kusttt 0 / 0 / 0 Регистрация: 05.07.2018 Сообщений: 48
	13.01.2019, 12:53 [ТС]	6
	Спасибо за ваш труд, но это не совсем то. Мой косяк, я не уточнил, что значит "мягко" При клике на кнопку под ней появляется текст. Когда я кликаю вне поля - текст резко исчезает и форма как бы резко "схлопывается". А мне бы хотелось, чтобы форма подтягивалась обратно к состоянию "без текста" плавно. Т.е. текст как бы мягенько исчезает под кнопку. Такое сделать реально или я фантазирую? Попробовал в стилях на форму повесить transition: 0.5s; - не помогло... 0

@kusttt 0 / 0 / 0 Регистрация: 05.07.2018 Сообщений: 48
	13.01.2019, 13:41 [ТС]	8
	Вот если взять button и завернуть его в <div>ы и назначить <div>ам класс вроде такого .form{width: 20%; margin: 0 auto; position: relative; top:50%; border:1px solid #000000;}, то когда текст плавно прячется - дно формы резко подскакивает вслед за ним, а не мягко возвращается на "свое" место. По логике тот же transition: 0.5s; должен бы решить проблему, ан-нет... 0

@Mr_Sergo 2036 / 1095 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	13.01.2019, 13:46	10
	Сообщение от kusttt дно формы Объясните что вы понимаете под этими словами Добавлено через 3 минуты Вы имеете ввиду что бы вся форма вместе с button плавно "схлопывалась" снизу вверх? Добавлено через 1 минуту проще было бы конечно посмотреть на пример 0

@kusttt 0 / 0 / 0 Регистрация: 05.07.2018 Сообщений: 48
	13.01.2019, 14:25 [ТС]	11
	Mr_Sergo, "дно формы" я имею ввиду border:1px solid, который border-bottom. Нарисовал картинкой во вложении, чтоб визуальной ясности привнести. Миниатюры 0

@kusttt 0 / 0 / 0 Регистрация: 05.07.2018 Сообщений: 48
	13.01.2019, 19:22 [ТС]	13
	Плохо, что от исходного Javascript кода ничего не осталось (он был нужен). При клике на поле, очерченном вне border: 1px solid; текст не исчезает. Ну, да ладно, мне было основное сделать, чтобы текст пропадал при клике и вы мне в этом помогли, спасибо. Дальше сам буду копать в сторону transition. Добавлено через 1 час 17 минут Это решается как-то при помощи jquery и $(blockId).animate({height: 'show'}, 500); Нашел на сайте пример. 0

@Mr_Sergo 2036 / 1095 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	13.01.2019, 21:46	14
	Сообщение от kusttt При клике на поле, очерченном вне border: 1px solid; текст не исчезает Он и не должен исчезать!- по-скольку так прописано в условиях... а то что не прописано, соответственно не будет исполняться! ибо не прописано... таков он JS 0

Закрыть div при клике вне его

Решение