Войти
Регистрация

Всплывающее окно на CSS с затемнением

Всплывающее окно на CSS с затемнением

Здравствуйте, друзья!

Большое количество сайтов применяют формы, одни их делают статичными, где-нибудь в подвале или в шапке сайта, а другие лишь создают кнопки вызова всплывающих форм.

Второй вариант мне нравится больше, т.к. он экономит место на сайте и форму можно вызвать с помощью простого клика по кнопке.

Обычно такую возможность чаще реализуют с помощью JavaScript, но что если этот язык Вам не знаком? Конечно же на помощь придет CSS.

И так, в первую очередь нам нужно создать HTML-код кнопки вызова формы, а также код будущей формы с оберткой, т.е. затемняющим фоном при ее вызове:

<a href="#modal_form" class="open_form">Вызвать форму</a>

<div id="modal_form">
  <form action="" method="POST">
  <a href="">&#10006;</a>
    <p>Форма входа на сайт</p>
      <div>
        <label>Введите логин:</label>
        <input type="text" name="login" required>
      </div>
      <div>
        <label>Введите пароль:</label>
        <input type="password" name="password" required>
      </div>
      <button type="submit">Войти</button>
  </form>
</div>

Здесь мы сначала создали ссылку в качестве кнопки вызова формы и в атрибуте href указали, так называемый якорь, т.е. #modal_form.

Затем создали блок <div> с идентификатором #modal_form. Этот блок у нас выступает в качестве затемняющего фона.

Внутри этого блока уже разместили простую форму с 2 полями ввода, а также сразу после тега <form> создали ссылку в виде крестика для закрытия формы, в качестве крестика у нас спецсимвол. Ссылка никуда не ведет, поэтому атрибут href оставляем пустым.

Далее напишем CSS стили для нашей кнопки вызова формы, самой формы и обертки:

<style>
.open_form {
  background:#1C83D1;
  border-radius:3px;
  color:#fff;
  font-family:arial;
  padding:10px;
  text-decoration:none;
}
#modal_form {
  align-items:center;
  background:rgba(0,0,0,1);
  display:none;
  font-family:arial;
  height:100%;
  justify-content:center;
  left:0;
  position:fixed;
  top:0;
  width:100%;
}
#modal_form form {
  background:#fff;
  border-radius:4px;
  padding:20px;
  position:relative;
  width:350px;
}
#modal_form form a {
  color:#000;
  position:absolute;
  right:5px;
  text-decoration:none;
  top:0;
}
#modal_form form p {
  font-size:20px;
  margin:0;
  text-align:center;
  text-transform:uppercase;
}
#modal_form form div {
  margin:25px 0 15px;
}
#modal_form form label {
  display:block;
  margin:5px 0;
}
#modal_form form input {
  border:1px solid #BDBBBB;
  border-radius:3px;
  box-sizing:border-box;
  height:40px;
  padding:5px;
  width:100%;
}
#modal_form form button {
  background:#1C83D1;
  border:1px solid transparent;
  border-radius:4px;
  color:#fff;
  cursor:pointer;
  font-size:17px;
  margin:0 auto;
  padding:7px 10px;
  width:100px;
}
#modal_form:target {
  display:flex;
}
</style>

В стилях в самом последнем правиле мы использовали псевдокласс target для того, чтобы показать нашу форму, которая изначально скрыта. При нажатии на кнопку вызова в адресной строке появляется якорная ссылка #modal_form и в этот момент срабатывает псевдокласс target, задавая нашей обертке с формой стиль, который показывает форму.

Здесь обязательно якорная ссылка в кнопке и идентификатор формы должны совпадать.

При нажатии на крестик мы, скажем так, переходим по пустой ссылке, т.е. якорь #modal_form в адресной строке браузера пропадает и значит отменяется действие псевдокласса таргет, т.е. обертка с формой снова скрыты.

Форма в действии. Нажмите на кнопку и убедитесь.

Вызвать форму


Теперь Вы можете создать форму на основе этого кода без использования языка программирования только лишь с помощь CSS. Можете добавить другие поля, стили формы и т.д.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?