Хостинг от 165 ₽/месяц. Перенос сайтов и месяц на тестирование - бесплатно!
HTML Academy

Скрипт, закрывающий блок при клике

()

Очень часто возникает необходимость сделать на сайте блок, который бы закрывался при клике по кнопке "закрыть" или при клике вне блока. Для реализации такого функционала можно воспользоваться javascript и методом .hide()

Допустим, у нас имеется блок, который должен закрываться при клике по кнопке c классом .close.

<div class="block"><div class="close">закрыть</div></div>

Для закрытия блока при клике понадобится такой скрипт:

<script>
jQuery(document).ready(function($) {
$('.close').click(function () {
$('.block').hide();
});
})
</script>

Перед использованием скрипта не забываем подключать к странице библиотеку jquery. Ее можно либо скачать отсюда, либо подключить с помощью ссылки

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Чтобы блок закрывался еще и при клике вне его, необходимо добавить в скрипт body:

<script>
jQuery(document).ready(function($) {
$('body,.close').click(function () {
$('.block').hide();
});
})
</script>

На этом все. Надеюсь, что статья была вам полезной!

Понравилась статья?

Оцените!

Средняя оценка / 5. Количество оценок:

Оценок пока нет. Поставьте оценку первым!

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

Ваш адрес email не будет опубликован.

*

code