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

5476

Очень часто возникает необходимость сделать на сайте блок, который бы закрывался при клике по кнопке "закрыть" или при клике вне блока. Для реализации такого функционала можно воспользоваться jquery и методом .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>

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

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

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

*
code