Очень часто возникает необходимость сделать на сайте блок, который бы закрывался при клике по кнопке "закрыть" или при клике вне блока. Для реализации такого функционала можно воспользоваться jquery и методом .hide()
Допустим, у нас имеется блок, который должен закрываться при клике по кнопке c классом .close.
<div class="block"><div class="close">закрыть</div></div>
Для закрытия блока при клике понадобится такой скрипт:
<script>
jQuery(document).ready(function($) {
$('.close').click(function () {
$('.block').hide();
});
})
</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>
jQuery(document).ready(function($) {
$('body,.close').click(function () {
$('.block').hide();
});
})
</script>
На этом все. Надеюсь, что статья была вам полезной!
