Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.04.2016, 17:35
Кандидат Javascript-наук
Отправить личное сообщение для yaparoff Посмотреть профиль Найти все сообщения от yaparoff
 
Регистрация: 26.04.2016
Сообщений: 106

Как закрыть окно кликнув в любое другое место экрана?
При клике на ссылку у меня выводиться окно, и если второй раз кликаю на ссылку - окно закрывается. Это реализовано с помощью classList.toggle

Теперь стоит задача: чтобы пользователь, когда открыл окно, захотев его закрыть кликнул в любое место экрана (кроме самого окна) - и окно исчезло

Вот сам пример
Ответить с цитированием
  #2 (permalink)  
Старый 27.04.2016, 01:21
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как уменьшить лишнее пустое место в диалоге jQuery dialog? xintrea Элементы интерфейса 1 23.06.2013 19:52
Как закрыть дочерние окно из родительского при помощи переключателя checkbox?? dieseln Общие вопросы Javascript 4 15.12.2010 16:30
Как закрыть окно и вернуться на html-метку предыдущего? Kokaln Events/DOM/Window 6 21.04.2009 04:12
Как узнать свернуто окно браузера или нет. bar-boss Events/DOM/Window 3 25.09.2008 16:09
как при открытии окна закрыть предыдущее Евдокимова Events/DOM/Window 3 16.09.2008 17:12