Как закрыть окно кликнув в любое другое место экрана?
При клике на ссылку у меня выводиться окно, и если второй раз кликаю на ссылку - окно закрывается. Это реализовано с помощью classList.toggle
Теперь стоит задача: чтобы пользователь, когда открыл окно, захотев его закрыть кликнул в любое место экрана (кроме самого окна) - и окно исчезло Вот сам пример |
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .page-header { position: relative; } .contact_form { position: absolute; top: 80px; right: 150px; width: 520px; padding: 15px 0; background-color: #fff; border-radius: 10px; box-shadow: 1px 1px 9px rgba(0,0,0, .5); visibility: hidden; } .visible { visibility: visible; } </style> </head> <body> <header class="page-header"> <form class="contact_form" action="contact-form.php" method="post"> <p> <label for="name">Имя:</label> <input type="text" name="name" placeholder="Введите ваше имя" required /> </p> <p> <label for="email">Email:</label> <input type="email" name="email" placeholder="Введите электронный адрес" required /> <span class="form_hint">Правильный формат "name@something.com"</span> </p> <p> <label for="message">Текст сообщения:</label> <textarea name="message" cols="40" rows="6" required ></textarea> </p> <input name="bezspama" type="text" style="display:none" value="" /> <p> <button class="contact_form-submit" type="submit">Отправить сообщение</button> </p> </form> <div class="page-header__top"> <div class="page-header__contacts"> <a class="page-header__question" href="#"> <i class="fa fa-comments"></i>Задать вопрос </a> </div> </div> </header> <script> var question = document.querySelector(".page-header__question"); var contactForm = document.querySelector(".contact_form"); question.addEventListener("click", function(event) { event.preventDefault(); event.stopPropagation(); contactForm.classList.add("visible"); document.addEventListener("click", hide); }); function hide(event) { if ( contactForm.contains(event.target) ) return; contactForm.classList.remove("visible"); document.removeEventListener("click", hide); } </script> </body> </html> |
Часовой пояс GMT +3, время: 23:29. |